Search code examples
jquerygoogle-mapsgoogle-maps-api-3markerclustererjquery-ui-map

Get all markers in Google Maps v3 Jquery


Google Maps v3 JQuery introduced the following way to get markers:

$map.gmap('get', 'markers');

I'm trying this, but getting an empty array. Here's the code I'm working with:

var smap = $('#smap');  

$(window).load(function() {
    /* Initialize Map */
    smap.gmap({
        center: '34.913167, -94.618089',
        zoom: 5
    }).bind('init', function() {
        /* Add markers */
        $.getJSON('static/stninfo.js', function(data) {
            $.each(data, function(index, stn) {
                var latlng = (stn.loc).substring(0, stn.loc.length - 4);

                smap.gmap('addMarker', {
                    position: latlng,
                    bounds: false,
                    id: stn.stnid
                }).click(function() {
                    smap.gmap('openInfoWindow', {
                        content: '<strong>' + stn.name + '</strong></br>' + latlng
                    }, this); 
                });
            });
        });

        var imap = smap.gmap('get', 'map');
        var imarkers = smap.gmap('get', 'markers');

        console.log(imap);
        console.log(smap.gmap('get', 'markers'));
        /* Initialize clusters */
        smap.gmap('set', 'MarkerClusterer', new MarkerClusterer(imap, imarkers));

    });
});

As per the code, I need this to use the MarkerClusterer. I'm not getting any errors in the console. As to the results of the console.logs, the first one (imap) returns the map object correctly. The second (marker list) simply returns an empty array ("[]").

It appears there's nothing wrong with the MarkerClusterer code; my suspicion is I'm adding the markers incorrectly. Any insight on what's wrong here?

I've been using this as a reference: https://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_sample_code


Solution

  • $.getJSON is async, when console.log(smap.gmap('get', 'markers')); executes getJSON probably hasn't ended yet, so there's your empty array.

    put it inside the getjson code and most probably you'll get it working

           $.getJSON('static/stninfo.js', function(data) {
            $.each(data, function(index, stn) {
                var latlng = (stn.loc).substring(0, stn.loc.length - 4);
    
                smap.gmap('addMarker', {
                    position: latlng,
                    bounds: false,
                    id: stn.stnid
                }).click(function() {
                    smap.gmap('openInfoWindow', {
                        content: '<strong>' + stn.name + '</strong></br>' + latlng
                    }, this); 
                });
            });
            console.log(smap.gmap('get', 'markers'));
        });