Googleマップのマーカークラスラが機能していない

Question

私のGoogleマップでMarkerClustererライブラリを使用するには、次のコードを書いていますが、何らかの理由で何も変更されません。私はループのためにそこにいくつかの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があります。クロムで

エラーJavaScriptコンソールon this page：

• キャッチされないにReferenceError：GOverlayが定義されていないmarkerclusterer.js：630
• キャッチされないにReferenceError：マーカーは
に定義されていない

最初はあなたが暗示します誤ったバージョンのmarkerclustererスクリプトを使用しています（GOverlayはGoogle Maps API v2のものです）

If your codeに正しいMarkerClustererを使用し、マーカー配列を宣言すると、クラスターが機能しますが、InfoWindowの内容とマーカー（createMarker関数で修正可能）との関連に問題があります。

Hereは、マーカーのインフォウィンドウへの関連付けを修正するためにcreateMarker関数を使用する例です。あなたのコードに基づいていますが、改善の余地があります（あなたのコードには多くの冗長性があります）。