Skip to content Skip to sidebar Skip to footer

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"