Google Maps Marker Clusterer funktioniert nicht

Question

Ich habe den folgenden Code, um zu versuchen, die MarkerClusterer-Bibliothek für meine Google Map zu arbeiten, aber aus irgendeinem Grund ändert es nichts. Ich habe einige Jinja2 für die Schleife drin, aber das funktioniert alles richtig. Kannst du irgendwelche Fehler sehen?

<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> 

Wie gesagt, die Karte sieht einfach normal aus, nachdem ich MarkerClusterer angerufen habe.

Answer 1

Es sieht so aus, als müssten Sie die Eigenschaft {map: map} aus dem Marker entfernen.

Hier ist ein working example mit Clustering.

Fehler in Chrom JavaScript-Konsole on this page:

• Uncaught Reference: GOverlay nicht markerclusterer.js definiert: 630
• Uncaught Reference: Marker nicht
definiert

Die erste impliziert Sie sind Verwenden der falschen Version des markerclusterer-Skripts (GOverlay stammt vom Google Maps API v2)

Wenn Ich benutze your code mit dem richtigen MarkerClusterer und deklarieren die Marker-Array, der Clusterer funktioniert, aber Sie haben Probleme mit der Zuordnung der InfoWindow Inhalte mit der Markierung (die mit einer createMarker-Funktion behoben werden kann).

Here ist ein Beispiel, das eine createMarker-Funktion verwendet, um die Zuordnung der Markierungen zu dem Infofenster zu beheben. Es basiert auf Ihrem Code, aber es gibt Raum für Verbesserungen (es gibt eine Menge Redundanz in Ihrem Code).