Google Mapsにマーカーがありません

-1

JSONファイルを使ってGoogle Mapsにマーカーを表示したいが、マーカーは表示されません。Google Mapsにマーカーがありません

start.jsp

<!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=MyKey&sensor=ture"> 
</script> 
<script type="text/javascript"> 
    var map; 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(36.771212, 126.935475), 
     zoom: 16, 
     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("data.json", function(json1) { 
     $.each(json1.fireturk, function(key, data) { 
      var latLng = new google.maps.LatLng(data.lat, data.lon); 
      alert(latLng); 
     // Creating a marker and putting it on the map 
      var marker = new google.maps.Marker({ 
      position: latLng, 
      //map: map, 
      title: "hello!!" 
      }); 
      marker.setMap(map); 
      //alert(data.lat, data.lon); 
      }); 
     }); 
     }); 
    </script> 
    </body> 
</html>

data.json

{ 
"fireturk": [ 
    {"lat": "36.771212", "lon": "126.935475"}, 
    {"lat": "36.771252", "lon": "126.935505"}, 
    {"lat": "36.771288", "lon": "126.935595"} 
    ] 
}

Googleマップマーカーを失っている理由を私は知りません。マーカーを追加することができないことに加え

、警告の値は

出典

2017-11-01 박승규

あなたのブラウザの** developer **ツールコンソールで、エラーが発生していることを確認しましたか？ 'alert'はあなたのコードをデバッグする方法ではありません - latとlonを** ** new google.maps LatLng（Number（data.lat）、Number（data.lon））; ' - それが役に立つかどうかはわかりません –

<!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=myKey&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    var map; 

    function setMarker() { 
     $.getJSON("data.json", function(json1) { 
      $.each(json1.fireturk, function(key, data) { 
       var latLng = new google.maps.LatLng(parseFloat(data.lat), parseFloat(data.lon)); 
       alert(latLng); 
       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        //map: map, 
        title: "hello!!" 
       }); 
       marker.setMap(map); 
       //alert(data.lat, data.lon); 
      }); 
     }); 
    } 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(36.771212, 126.935475), 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     setMarker(); 
    } 
    </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> 
</body> 

</html>

奇妙ですだから私はあなたのコードの変更次のようでした - 私は

をdocument.ready関数でscriptタグを削除し、そのコードをsetMarker関数で移動し、（最終的に）initialize関数からsetMarker関数を呼び出しました。
あなたの$ .eachループのlatlongをparseFloatします。
センサーをfalseに設定します。

これは静的なデータのために私のために働く。

出典

2017-11-01 11:11:06 urvashi

Google Mapsにマーカーがありません

答えて

関連する問題