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.log
s, 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
$.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'));
});