markerCluster not showing points

Question

I am trying to clustering some location on google map. I have tryied to merge the code from from this question and the code from markercluster examples. But can't fix it. This is my code:

<div id="map_canvas" style="width: 98%; height: 500px;border:2px solid #ccc;float:left"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>     
    <script>
function initialize() {
var elevator;
var myOptions = {
    zoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'terrain'
    };
var map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Argentina, Buenos Aires', 'Argentina, Cordoba, Cordoba Capital','Argentina, Cordoba, Rio Tercero'];
var markers = [];
for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({position: latlng });
        markers.push(marker);
    });
    }
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>

It is not a problem of jquery, because the example works very well if I don't try to use markerCluster. So I am doing something wrong with array passing.

score 4 · Accepted Answer · answered Jan 08 '15 at 22:45

4

$.getJSON runs asynchronously, markers will not be populated yet when you use it as argument for MarkerClusterer.

Use

markerCluster.addMarker(marker);

instead of

markers.push(marker);

answered Jan 08 '15 at 22:45

Dr.Molle

116,463
16
195
201

I tryed definig `markerCluster` before the loop an then calling `markers.push(marker);` inside the loop, but does not work. other ideas? – emanuele Jan 08 '15 at 23:08
please make yourself familiar with the term "asynchronously", it's not a matter of the position inside your code. – Dr.Molle Jan 08 '15 at 23:11
1

@emanuele - before the new loop declare var markerCluster = new MarkerClusterer(map); Notice there is no marker option. Inside the loop do as the Doc says. { ignore my edit about quotes, it was cut+paste error on my part } – maurice Jan 08 '15 at 23:18
@Dr.Molle @maurice Sorry I made a mistake writing the comment above. What I would say is that I declared `var markerCluster = new MarkerClusterer(map)` before the loop, then I called `markerClusterer.addMarker(marker)` from inside the loop. – emanuele Jan 09 '15 at 01:00
I solved calling `$.ajaxSetup({ async: false});` before loop. Thanx – emanuele Jan 09 '15 at 02:08
`async:false` will block the page until the requests are finished(let's assume it may happen that the API didn't respond, do you want to have a freezed page?) Demo of the suggested modification: http://jsfiddle.net/doktormolle/4z7L3d2q/ – Dr.Molle Jan 09 '15 at 07:38

markerCluster not showing points

1 Answers1