Question

I’m struggling trying to cluster 50 markers using the markerclusterer v3 with Google maps API v3.

I’ve followed the simple example found at: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html to build my function however when the map is loaded I am getting the following error in firebug:

a is undefined
Ba(H,function(a){if(!a)return l;return...){return new P(this.T.d,this.P.b,i)}; main.js (line 13)

My function is just doing a simple json call to get the point from the server and then build the array of markers before adding them to the markerclusterer.

function addMarkerCluster(){
    //get json data and create array of map markers and mark up the map using
    //a map cluster

    $.getJSON("feed/kml.php?action=json",
        function(data){

            var map;
            var markers = [];

            var latlng = new google.maps.LatLng(24.91654, 15.31326);

            var myOptions = {
                zoom: 3,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID

            };
            map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

            google.maps.event.addListener(map, "tilesloaded", function(){
                attachFancyBox();
                hideLoadDialog();
            });


            //loop through the data and add to the markers array the lat/lng of the centerpoints
            //as google lat/lng objects.
            $.each(data, function(i){

                latlng = new google.maps.LatLng(this.lat, this.lng);
                var marker = new google.maps.Marker(latlng);

                markers.push(marker);

            });



            var markerCluster = new MarkerClusterer(map, markers);


        });


}

Any idea why this is causing the google map main.js to fail in this way? If I just add the MarkerClusterer without the array of markers the map renders without errors.

When I add the array of markers then the map errors.

Thanks,

Grant

Answer 1

Fix was simple I’d miss out the fact that the google maps api v3 needs to have a object passed to it. The fix was to change

var marker = new google.maps.Marker(latlng) 
to
var marker = new google.maps.Marker({'position' : latlng});