How do I get the current Google Map that is already initialized on the page with the Javascript V3 api, so I can reset a marker?
declare the map object in javascript as global then you get the anywhere in javascript
If you have a marker and you want to reference the map that it relates to you can simply call getMap() on the marker.
var myMap = myMarker.getMap();
When called from an object it returns the map on which the object is rendered/displayed.
This is true for most objects in the google.maps namespace (Marker, Polyline, Rectangle, etc).
If you take a look through the reference page you can see which objects getMap() is an available method for.
Related
I'm wondering if it's possible to set markers to be visible in a chosen zoom level for the
Google Map API v3.
I figured it's possible in the v2 of the API using the "Marker Manager" but can't find a way for the latest API.
Example:
Marker-1 -> (max_zoom:10, min_zoom:5) //will on be shown within zoom level 5-10
Marker-2 -> (max_zoom:15, min_zoom:10) //will on be shown within zoom level 10-15
As I'm developing an jQuery-plugin I only want to use the original API without add-ons.
Thanks in advance!
Supposing map is the object instanced to manage the gmap, i'd do something like this:
var zoomLevel = map.getZoom();
if (zoomLevel>=5 && zoomLevel<=10) {
// call the setMarker function for the marker1
} else if (zoomLevel>10 && zoomLevel<=15) {
// call the setMarker function for the marker2
}
Maybe u want to handler the zoom change event, if so look at this: http://code.google.com/apis/maps/documentation/javascript/events.html
You can use Marker Manager with API v3. The examples in http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/ use the most recent Maps API and they seem to work just fine.
For other options, like Marker Clusterer and Fusion Tables, see http://code.google.com/apis/maps/articles/toomanymarkers.html.
You can also do it by checking the zoom level and adding/removing markers from the map based on that, as suggested by #lucke84 in their answer.
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
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.
Is there a way to get all the markers on Google Maps?
If you mean "how can I get a reference to all markers on a given map" - then I think the answer is "Sorry, you have to do it yourself". I don't think there is any handy "maps.getMarkers()" type function: you have to keep your own references as the points are created:
var allMarkers = [];
....
// Create some markers
for(var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({...});
allMarkers.push(marker);
}
...
Then you can loop over the allMarkers array to and do whatever you need to do.
The one way found is to use the geoXML3 library which is suitable for usage along with KML processor Version 3 of the Google Maps JavaScript API.
I'm assuming you have multiple markers that you wish to display on a google map.
The solution is two parts, one to create and populate an array containing all the details of the markers, then a second to loop through all entries in the array to create each marker.
Not know what environment you're using, it's a little difficult to provide specific help.
My best advice is to take a look at this article & accepted answer to understand the principals of creating a map with multiple markers:
Display multiple markers on a map with their own info windows
If you are using JQuery Google map plug-in then below code will work for you -
var markers = $('#map_canvas').gmap('get','markers');
For an specific cluster use:
getMarkers() Gets the array of markers in the clusterer.
For all the markers in the map use:
getTotalMarkers() Gets the array of markers in the clusterer.
Google Maps API v3:
I initialized Google Map and added markers to it. Later, I wanted to retrieve all markers and did it simply by accessing the map property "markers".
var map = new GMaps({
div: '#map',
lat: 40.730610,
lng: -73.935242,
});
var myMarkers = map.markers;
You can loop over it and access all Marker methods listed at Google Maps Reference.
Could some one advice, how can i got only one/Unique marker on google map v3. All previous markers should be removed when i create new makrer on map.
Thanks
You need to keep track (an array) of all the marker objects on your map. You need to iterate through them, setting their map property to null. From the docs:
To remove a marker, call the setMap() method passing null as the argument.
http://code.google.com/apis/maps/documentation/v3/overlays.html#Markers