Google지도 마커 클러스터러가 작동하지 않습니다.

Question

MarkerClusterer 라이브러리를 Google지도에서 작동 시키려면 다음 코드를 사용하지만 어떤 이유로 든 아무것도 변경하지 않습니다. 루프에 몇 가지 jinja2가 있지만 제대로 작동합니다. 오류를 볼 수 있습니까?

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

내가 말했듯이지도는 그냥 MarkerClusterer를 호출 한 후 정상 보인다.

Answer 1

마커에서 {map : map} 속성을 제거해야합니다.

클러스터링이있는 working example입니다. 크롬

오류 자바 스크립트 콘솔 on this page :

• catch되지 않은 ReferenceError가 : GOverlay가 정의되어 있지 markerclusterer.js : 630
• catch되지 않은 ReferenceError가 : 마커
을 정의되지 않은

첫 번째는 당신이 의미 markerclusterer 스크립트의 잘못된 버전 사용 (GOverlay는 Google Maps API v2에서 제공)

If your code을 올바른 MarkerClusterer과 함께 사용하고 마커 배열을 선언하면 클러스터러가 작동하지만 InfoWindow 내용과 마커 (createMarker 함수로 고정 될 수 있음)와의 연결에 문제가 있습니다.

Here은 createMarker 함수를 사용하여 마커와 infowindow의 연결을 수정하는 예제입니다. 그것은 당신의 코드를 기반으로하지만, 거기에 개선의 여지가있다 (귀하의 코드에 중복이 많이있다).