Howto Show Markers Within Specific Zoom

Blog Projects
google javascript maps

Google Maps API offers several nice but relatively unknown shortcuts. One of them is new GMarkerManager class. It enables you to easily control at what zoom levels markers are shown.

In the map above if you zoom in twice a marker appears. Zoom in another two times and the marker disappears. This effect can be achieved by using managers addMarker() method. Instead of using something like:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 map.addOverlay(marker);

you must use:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 var manager = new GMarkerManager(map);
 manager.addMarker(marker, min_zoom, max_zoom); 

New addMarker() method receives three parameters. Marker itself, minimun zoom level and maximum zoom level. Last parameter is optional. If you provide only minimum zoom level marker will be showed from that level to the end.

NOTE! When map is zoomed markers are not automatically shown. You have to call managers refresh() method. It checks if there are any new markers to show on map. You can do this by binding refresh() method to zoomend event.

Show Me The Source!

Ok ok. Here is source code to the map above.

if (GBrowserIsCompatible()) {

    /* Location of our office. Used for marker and centering. */
    var taevas = new GLatLng(59.43399,24.760566);
    var map    = new GMap2(document.getElementById("zoom_map"));
    map.setCenter(taevas, 10);
    map.addControl(new GSmallMapControl());
      
    var manager = new GMarkerManager(map);
    var marker  = new GMarker(taevas);
      
    /* Add marker to map. Appear at zoom level 12 and disappear at 14. */
    manager.addMarker(marker, 12, 13); 
   
    /* You need to refresh after zooming to make markers (dis)appear. */
    GEvent.addListener(map, "zoomend", function(old, current) {
        manager.refresh();
    });

    /* Always remember to cleanup to avoid memory leaks. */
    $(window).unload(function() {
        GUnload();
    })
};

Related entries: Google Maps Without JavaScript.



When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.