Update shape on google maps - google-maps

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);

Related

How to draw circle or rectangle on google maps

i want to draw circle or rectangle when i search somewhere on google maps. How to do this with iframe ? Is there any program or tool or something do this ?
Try this ...
// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
.center(new LatLng(37.4, -122.1))
.radius(1000)); // In meters
// Get back the mutable Circle
Circle circle = myMap.addCircle(circleOptions);

How to set zoom to fit circle in Google Maps

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);

how to get all LatLng points between two end points in a polyline

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);

How can I catch the Map movement in Google Maps?

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

Google Maps: How can I change the z-index of a Marker?

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.