Is there any easy ways to find the bounding box of a polyline using Google Maps API v3? I'm working on a project where I need to update the bounds as data is added and removed from the map. This is pretty easy by just doing bd.extend(point) where bd is the bound object and point is a LatLng object. The problem is when I start removing data I would like it to change the bounds and zoom back in. Are there any built in functions that can do this or will I need to write something for myself?
Expanding on oenpelli's solution, this is the extended getBounds() method that I am using to recreate the functionality from V2 API. This is working perfectly in my project.
google.maps.Polyline.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPath().forEach(function(item, index) {
bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));
});
return bounds;
};
Just remember that this needs to be added AFTER the API javascript is loaded, so in your init method.
The v2 API had the GPolyline.getBounds() method to do exactly this. However it appears that there is no equivalent method in the v3 API.
You may want to handle this by overriding the changed property of your Polyline MVCObject in order to be notified when the object changes state. Then you can calculate the bounding box using the LatLngBounds.extend() method that you suggested.
I think Google intentionally omitted such methods from the v3 API in an attempt to keep the API lightweight. A similar omission discussed a couple of days ago on Stack Overflow was the GMap2.clearOverlays() method.
You can also extend the Polyline class to add your own getBounds method. Refer to google maps api v3: add point on polyline beetwen two existing points on click polyline event for how to do this.
Related
is this the correcty way to change the add Overlay to v3? In V3 addOverlay is deprecated...and replaced with setMap?
if (setContainerVisible == 1) {
mapElements[lMapElementIndex]['visible'] = 1;
//map.addOverlay(marker); v2
marker.setMap(marker); // v3 ??
}
for more infos see the whole source http://pastebin.com/w1nm0W75 (line: 507)
Not quite, there is actually a number of ways you can do it. The simplest, and what you're probably looking for is
marker.setMap(map);
You can also initialize the map it supposed to be bound to when initializing your marker variable in the markerOptions.
Take a look at this document, it describes the methods and approaches to add markers and other overlays in V3: https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays
How can I best zoom to group of points in google maps api v2? In api v3 I would use bounds object to store the points and then zoom to these bounds using fitBounds() function, but in v2 I really don't know.
I found some advice here, but the solution of writing custom function seems quite clumsy...
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/996f83e075e51fdf
Try this mini tutorial, it sounds like what you want:
http://econym.org.uk/gmap/basic14.htm
var bounds = new GLatLngBounds();
for (... each point ...) {
bounds.extend(latlng);
}
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
http://econym.org.uk/gmap/example_map14.htm
I want to retrieve the top and left position of marker (in pixels) in google map api v3. How can this be done? I know that there are some hints on using fromLatLngToDivPixel(), but may I know how it works? example?
You mean the coordinates in pixels within the div? Look at http://qfox.nl/notes/116
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var point = overlay.getProjection().fromLatLngToContainerPixel(latLng);
or
var point = overlay.getProjection().fromLatLngToDivPixel(latLng);
Ugly indeed. Much easier in v2, where these methods were directly methods of GMap2 object. Another flaw of google api v3!
If you facing problem having the overlay undefined, that's because the object is created after the map is idle.
Better call this within event listener, full explanation here https://stackoverflow.com/a/6657723/4026345
I'm looking for a way to generate complex Placemarks (or overlays that are "attached" to placemarks).
Is there a way (I haven't found it) with the Map v3 api to attach/overlay a on placemark?
Or, will I need to draw outside of the Google api and then have listener/s that trigger redrawing when the user pans the map?
You extend google.maps.OverlayView with an object that override onAdd(), draw(), and onRemove()
In onAdd you'll probably want to set up a reference to a pane in google.maps.MapPanes to put your markup into. Then you'll have to handle the pan and zoom events. You do that like so:
CustomOverlayView.prototype.initPanes = function() {
var panes = this.getPanes(); //object of type google.maps.MapPanes
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT
};
In order for your canvas to be useful for drawing, you need a way to convert your google.maps.LatLng objects into Point objects with x and y variables. The answer is in google.maps.MapCanvasProjection which has various methods that compute location objects encoded as google.maps.LatLng objects into useful pixel coordinates (and back again).
var projection = this.getProjection();//google.maps.MapCanvasProjection
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location);
Some details of how to put a canvas in google maps here: http://www.samedwards.net
This is easily done, so I'm sorry an answer didn't appear sooner. Hopefully this is still useful to you.
See:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
And here's an example:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html
You need to implement a Javascript class which extends OverlayView. Specifically, you will write a draw() method that the Maps API will call whenever the state of the map has been changed (e.g. it has been dragged or zoomed).
In that method you can create a HTML5 canvas (or anything really) and draw whatever you need. You get access to the underlying map projection, which lets you reliably convert LatLngs to pixels for the current zoom level and projection type.
I would recommend looking at this semi official extension library for creating a canvas overlay:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/examples/hello2d.html
as well as this sample, which uses raphael instead, but shows how you might associate your additional objects with markers:
http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html
In Google Maps API v2 we can set to marker an option bouncy:true. It adds to marker eye-candy ability - after dragging this marker, it is bouncing.
Is it possible to do in API v3 ?
Here's how you do it in V3
google.maps.event.addListener(marker, "dragend", function(){
marker.setAnimation(google.maps.Animation.BOUNCE);
});
I just had a quick look at the API v3 spec for Markers - it doesn't look like the 'bouncy' option is available right now but I wouldn't be surprised to see this get implemented into the v3 API at some point - it's still in Beta and bound to change quite a bit.
Here is a link to the API v3 Reference on the available Marker Options
If you really wanted the behavior in a V3 Map now you could tie an event to the 'dragend' method on the Marker Object. Have the function called alter the anchor point of the MarkerImage object - check out the MarkerImage object in the API too.
Well, I was looking for a way for implementing bouncy markers in V3 of google maps so that if we are showing a cluster of markers, the currently selected marker should be visible clearly.
We used the z-index property of the marker to set the z-index of the current marker at a relatively higher value than the rest.