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

Was it helpful?

Solution

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});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top