Javascript：jsonファイルを使用してGoogleマップにマーカーを追加する

Googleマップを使用してシンガポールのバス停のマーカーを追加しようとしています。マイコード：Javascript：jsonファイルを使用してGoogleマップにマーカーを追加する

<!DOCTYPE html> 
    <html> 
    <head> 
     <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=AIzaSyB_rFf5Ow4UXIxmXtRXMvVbfIinBSWDc7o&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    var map; 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(1.290270,103.851959), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery- latest.min.js"></script>  
    </head> 
    <body onload="initialize()" > 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.getJSON("bus-stops.json", function(json1) { 
     $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      title: data.name 
     }); 
     marker.setMap(map); 
     }); 
    }); 
    }); 
</script>

私は、このファイルと同じフォルダにバスstops.jsonを配置しています。コードはマーカなしのGoogleマップのみを表示しています。データは次のようになります：

[{"no":"10009","lat":"1.28210155945393","lng":"103.81722480263163","name":"Bt Merah Int"},{"no":"10011","lat":"1.2777380589964","lng":"103.83749709165197","name":"Opp New Bridge Rd Ter"}]

どこが間違っているのか教えてください。おかげで

出典

2016-12-05 Somnath Banerjee

ファイルを正しく読み込んでいること、つまり 'json1'が値を持っていることを確認できますか？' console 'を置くと '.each'ループが期待したすべての行を正しくループします.log（data） 'その中に？ – duncan

私はconsole.log（data）を置いていますが、Mozillaのfirebugを使ってコンソールに何も表示していません。 json1が何の価値も得ていないと推測します。提案してください。 –

jQueryファイルがロードされていますか？あなたのコードでは、ファイルが 'jquery-latest.min.js'として参照されていますが、正しいものではありません（ファイル名に空白はありません）。 – duncan

おそらくタイミングの問題。初期化関数から非同期の$.getJSON関数を呼び出すか、実行時にマップが初期化されていない場合を処理します。

var map; 
function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(1.290270, 103.851959), 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
    mapOptions); 
    $.getJSON("bus-stops.json", function(json1) { 
    $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     title: data.name 
     }); 
     marker.setMap(map); 
    }); 
    }); 
}

出典

2016-12-05 15:16:03 geocodezip

ありがとうございました！これは助けになり、私は正しくプロットを得ました。再度、感謝します。 –

Javascript：jsonファイルを使用してGoogleマップにマーカーを追加する

答えて

関連する問題