JSONから複数のGoogle Maps API V3マーカーをレンダリングする

Question

DBからPHPによってJSON出力されたGoogle Maps API V3を使用して複数のマーカーをプロットしようとしています。

マップはページ上で初期化されますが、マーカーは挿入されません。ブラウザは「リソースタイプが他と解釈されますが、MIMEタイプが未定義で転送されました」と警告します。

さらなるトラブルシューティング/デバッグのご提案をお願いします。地図service.php？アクションから

 <!-- load points from database into Locations JSON --> 
    $(document).ready(function() { 
     $.getJSON("map-service.php?action=listpoints", function(json) { 

     if (json.Locations.length > 0) { 
      for (i=0; i<json.Locations.length; i++) { 
       var location = json.Locations[i]; 
        addMarker(location); 
        } 
       } 
      }); 

     function addMarker(location) { 
      var point = new google.maps.LatLng(location.lat, location.lng); 
      var marker = new google.maps.Marker({ 
       position:point, 
       map: map, 
       title: location.name 
       }); 
      }; 


    }); 

検証済みサンプルJSON出力= listpoints

{"Locations":[{"name":"Abco Mountain","lat":"49.424999","lng":"-125.855003"},{"name":"Adder Peak","lat":"49.248333","lng":"-125.320000"},{"name":"Alexandra Peak","lat":"49.738110","lng":"-125.489998"},{"name":"Argus Mountain","lat":"49.538612","lng":"-125.389999"},{"name":"Big Baldy Mountain","lat":"49.759998","lng":"-126.129997"}]} 

Answer 1

私の問題は、元のマップオブジェクトをどのように初期化したかに起因しています。私が共有したコードでは見えませんでした...謝罪します。

は、私はこれでした：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

をし、これを行っておく必要があります。

this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

は私がAdding markers after map createdおかげ@yitwailこの記事で解決策を見つけました！

Answer 2

は、あなたのループのためのjQueryの$ .eachを使用してみてください。

IF（JSON & & json.Locations）{

$ .each（json.Locations、関数（）{ addMarker（この）; }）。

}）;

また、addMarker関数内のlatとlongitureでparseFloatを呼び出すこともできます。