Question

I have a bit of a puzzle on my hands. I’m Using Google Maps v3 and MarkerClusterer v3. When I load my page, the map appears, the points are all there, but nothing is clustered.

If I go to the firebug console and do:

markerCluster = new MarkerClusterer(map, markers);

Suddenly clustering works.

Weirdly, If I put an alert between the map instantiation and the markerclusterer instantiation, again clustering suddenly works.
Here is the end of my $(document).ready function:

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    markerCluster = new MarkerClusterer(map, markers);

and all it takes to make the clustering work is:

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    alert("test");
    markerCluster = new MarkerClusterer(map, markers);

What am I missing here? Do I need to refresh the map somehow? Is that what is happening with the alert box?

If you need more code drop me a comment.

Answer 1

Here is a lightly edited version of what I ended up using. I’m giving most of script here so people can get an idea of the context each function is happening in as well as the scope of everything. Hopefully this will save someone some head scratching.

var initialize = function(){

    var markers = [];
    var infowindow = new google.maps.InfoWindow();

    function load_content(marker, id){
        $.ajax({
            url: 'eventos/' + id,
            success: function(data){
                infowindow.setContent(data);
                infowindow.open(map, marker);
            }
        });
    }

    var opt = { ...options...}

    var map = new google.maps.Map(document.getElementById('map_canvas'), opt);

    map.setCenter(new google.maps.LatLng(-44.4419, 170.1419));
    map.setZoom(9);

    $.ajax({
        url: 'eventos/',
        method: 'GET',
        dataType: 'json',
        success: function(data){

            $.each(data, function(i, a){

                var latlng = new google.maps.LatLng(a.evento.lat, a.evento.lng);

                var marker = new google.maps.Marker({
                    position : latlng,
                    title: a.evento.title
                });

                google.maps.event.addListener(marker, 'closeclick', function() {
                    infowindow.setContent("");
                });

                google.maps.event.addListener(marker, 'click', function() {

                    infowindow.close();

                    infowindow.setContent("<img src='loading.gif'>");

                    load_content(marker, a.evento.id);
                });

                markers.push(marker);
            });

            var markerCluster = new MarkerClusterer(map, markers);

        }

    });

};