Google Maps Api V3 - Different Markers/labels On Different Zoom Levels
I was wondering if it is possible that Google has a feature to view different markers on different zoom levels. For example, on zoom level 1, I want one marker over China with the
Solution 1:
The real reason why my program was failing was because of the Marker Manager, which doesn't work with my Markers with Labels.
There was actually a much simpler approach, however, to fulfill my needs.
functioninitialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
getMarkers();
google.maps.event.addListener(map,'zoom_changed',function () {
if (map.getZoom() >= 3) showMarkers();
if (map.getZoom() <= 2) eraseMarkers();
});
}
functioneraseMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i].setVisible(false);
}
}
functionshowMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i].setVisible(true);
}
}
functiongetMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = newMarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
labelContent: locations[i][3],
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the labellabelStyle: {opacity: 0.75}
});
}
eraseMarkers();
}
Solution 2:
Looks like thing you are trying to make is called Marker Clustering.
Here you are lots of official google exmamples https://developers.google.com/maps/articles/toomanymarkers written on native javascript
http://gmap3.net/examples/clustering.html - using jQuery library.
I hope this will help you.
Post a Comment for "Google Maps Api V3 - Different Markers/labels On Different Zoom Levels"