We have distance search filter. It has a map viewport that allow to set base marker and a input text box that allows enter distance in kilometers.
We then add a circle to show this distance on the map.
How can I zoom the map so it fits the circle?
A google.maps.Circle has a getBounds() method which returns the LatLngBounds of the circle. You may use this bounds as argument for google.maps.Map.fitBounds()
If using a circle, you can do this:
map.fitBounds(circle.getBounds());
...at the end of the init-function.
http://jsfiddle.net/doktormolle/MHLjy/
For multiple circles use union instead of extend:
var bounds = new google.maps.LatLngBounds();
$.each(circles, function(index, circle){
bounds.union(circle.getBounds());
});
map.fitBounds(bounds);
Related
Please help me, i have some queries regarding google map API
Please concern 3rd point first
Is it possible to get the center point of map regarding map div in HTML (like my map div is 100px height and 100px width, then i get the center point lat long for 50,50px), i use the map.getCenter(); but it give the map center point
Is it possible on zoom_changed event my marker not sift on the browser screen it change the position with respect of zoom_changed event and stay same on browser screen ?
For example for point 2nd
Initially i have the map with marker set on London
But when i zoom in then the
Can i get the coordinates(lat long) with respect of net image place on map
If have any suggestion and solution please reply
1) The center point of the html div and that of the map will be the same. Using the same example that you have put if the map div is 100px height and 100px width, then center lat long should be 50,50px which is exactly what map.getCenter() will return.
2) Yes you can use the zoom changed event to move the marker to the center of the map. You will need to call the initZoomChanged method as given below. You can replace "centerMarker" with the name of your marker
3) Haven't really understood what you are trying to do here. Could you provide some more clarification?
The code for creating a marker at the map center and then keeping it in the center of the map after zoom in or zoom out is given below :
var centerMarker;
function createMarker()
{
var myLatLng = {lat: 51.5074, lng: 0.1278}
centerMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Map Center'
});
}
function initZoomChanged()
{
google.maps.event.addListener(map, 'zoom_changed', function() {
var center = map.getCenter();
centerMarker.setPosition(center);
});
}
I have a circle on google maps and I have a function which increases the radius. How do I update the circle on the map?
this.markerBoundary.radius = rd; //New radius assigned
//I need to update the shape here but setMap does not work
this.markerBoundary.setMap(this.gmap);
this.bounds = this.markerBoundary.getBounds();
use the setRadius-method instead to set the radius-property:
this.markerBoundary.setRadius(rd);
I am working on GMap customization. I want a floating circle to move across a a Polyline. My question is that can we get all LatLng points in a Polyline after a specific interval for eg, all LatLng at interval of 100meters. My polyline code is:
/** polyline **/
var tpath = [
new google.maps.LatLng(15.508718,73.839337),
new google.maps.LatLng(15.511457,73.839165)
];
var travelPath = new google.maps.Polyline({
path : tpath,
map : map,
geodesic : true,
strokeColor : '#000',
strokeOpacity : 0.7,
strokeWeight : 1
});
i get only the end LatLng values. I want the values across the Polyline.
Thanks in advance.
You could use google.maps.geometry.spherical.computeHeading(startPoint, endPoint) to get the heading.
Then compute the distance with google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
If the distance is 475m and you want to make ~100 jumps just do 475/round(475/100) to calculate the distance you want to move the circle each time. round(475/100) will give you how many times (iterations) you should move the circle.
Then you could use computeOffset(from:LatLng, distance:number, heading:number, radius?:number)
Then you can use computeOffset(circleCenter, distance, heading) to get the new cirecle center point in a for loop the amount of iterations calculated above. Don't forget to include a delay in your loop.
I don't know how to get it with google maps api but you can draw a line to get the points from a start and end manually. It's simple math for a drawing a line and calculate.
You can set On click listener on Polyline by using GoogleMap.OnPolylineClickListener, after it returns the polyline you click on.
List<LatLng> mPoints=polyline.getPoints();
be sure to make your polyline clickable by setting.
lineOptions.clickable(true);
I'm using Google maps V3, I searching for a listener to catch the movement (navigation) of the map, can I do that?
If yes, how can I do that and how can I know the size of movement in x and y ?
EDIT :
As I have a marker on the map, when I click on the marker a div is appeared in same position of the marker, but when I move the map, the maker moves in the same fashion, but the DIV is still in a fixed position, How can I move the div in the same way ?
The maps event 'bounds_changed' will help:
google.maps.event.addListener(map, 'bounds_changed', function () {
// whatsoever..., i.e.
boundsObject = map.getBounds();
});
It returns a bounds object consisting of two LatLng objects (NE and SW )whose values can be retrieved like:
neLatLngObject = boundsObject.getNorthEast();
swLatLngObject = boundsObject.getSouthWest();
// or the center of bounds:
ctrLatLngObject = boundsObject.getCenter();
To find the distance between two points look here: Calculate distance between two points in google maps V3
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.