Google Maps Marker Clusterer Not Functioning

Question

I have the following code to try to get the MarkerClusterer library to work for my Google Map but for some reason it doesn't change anything. I have some jinja2 in there for the loop but that is all working properly. Can you see any errors?

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD-pLsocZXv5mYwJsSxMghJncxa6iklFUU&sensor=false"></script>
        <script type="text/javascript" src="/static/js/markerclusterer.js"></script>
        <script type="text/javascript">

    var map;    

    function initialize() {

        var centerlocation = {{centerlocation|json_encode|safe}};   
        var LatLng = centerlocation.replace("(", "").replace(")", "").split(", ")
        var Lat = parseFloat(LatLng[0]);
        var Lng = parseFloat(LatLng[1]);

        var zoomAmt = 10;


      var USA = new google.maps.LatLng(Lat, Lng);
      var mapOptions = {
        zoom: zoomAmt,
        center: USA,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Global var
       var infowindow = new google.maps.InfoWindow();

    //markers array
    var markers = [];

    //put all the markers on the map
    {% for location in locations %}

    //need to do the JSON encoding because JavaScript can't have Jinja2 variables
    //I need the safe here because Jinja2 tries to escape the characters otherwise
    var GPSlocation = {{location.GPSlocation|json_encode|safe}};    
    var LatLng = GPSlocation.replace("(", "").replace(")", "").split(", ")
    var Lat = parseFloat(LatLng[0]);
    var Lng = parseFloat(LatLng[1]);    

    var markerLatlng = new google.maps.LatLng(Lat, Lng);
    var title = {{location.title|json_encode|safe}}
    var iwContent = {{location.render_front()|json_encode|safe}}

    var marker = new google.maps.Marker({
            position: markerLatlng,
            title: title,
            map: map
      });

    google.maps.event.addListener(marker, 'click', function () {
      infowindow.setContent(iwContent);
      infowindow.open(map, marker);
      });

    //putting the marker onto the markers array
    markers.push(marker);


    {% endfor %}

    //creating the marker cluster
    var markerCluster = new MarkerClusterer(map, markers);

    }

    </script>

Like I said the map just looks normal after I call MarkerClusterer.

Answer 1

Looks like you need to remove the {map: map} property from the Marker.

Here is a working example with clustering.

Errors in chrome Javascript console on this page:

• Uncaught ReferenceError: GOverlay is not defined markerclusterer.js:630
• Uncaught ReferenceError: markers is not defined

The first implies you are using the wrong version of the markerclusterer script (GOverlay is from the Google Maps API v2)

If I use your code with the correct MarkerClusterer and declaring the markers array, the clusterer works, but you have issues with the association of the InfoWindow contents with the marker (which can be fixed with a createMarker function).

Here is an example that uses a createMarker function to fix the association of the markers to the infowindow. It is based off your code, but there is room for improvement (there is a lot of redundancy in your code).