Google Maps Marker Clusterer Not Functioning

Question

Mam następujący kod, aby spróbować uruchomić bibliotekę MarkerClusterer dla mojej mapy Google, ale z jakiegoś powodu nic nie zmienia. Mam tam jinja2 dla pętli, ale to wszystko działa poprawnie. Czy widzisz jakieś błędy?

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

Tak jak powiedziałem, mapa wygląda normalnie po wywołaniu MarkerClusterer.

Answer 1

Wygląda na to, że musisz usunąć właściwość {map: map} ze znacznika.

Oto working example z klastrami.

Błędy w chromie Konsola JavaScript on this page:

• Uncaught ReferenceError: GOverlay nie jest zdefiniowana markerclusterer.js: 630
• Uncaught ReferenceError: markery nie jest zdefiniowana

Pierwszy zakłada jesteś za pomocą niewłaściwej wersji skryptu znacznika blokującego (GOverlay pochodzi z interfejsu API Map Google v2)

Jeśli Używam your code z poprawną MarkerClusterer i deklarowanie tablicy markerów, działa klaster, ale masz problemy z powiązaniem zawartości InfoWindow z markerem (który można naprawić za pomocą funkcji createMarker).

Here to przykład, który wykorzystuje funkcję createMarker do ustalenia powiązania markerów z inforindownią. Jest oparty na kodzie, ale jest miejsce na poprawę (w kodzie jest dużo redundancji).