title: Google Maps Marker Clusterer Not Functioning
body: <p>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?</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;style type="text/css"&gt;
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD-pLsocZXv5mYwJsSxMghJncxa6iklFUU&amp;sensor=false"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/static/js/markerclusterer.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
      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);
  
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Like I said the map just looks normal after I call MarkerClusterer.</p>