Maps APIに地図が表示されません

-2

私は次のコードを使用して、jsonアーカイブのさまざまな点を含む地図をwamp wwwフォルダ内のフォルダに表示しています。しかし、結果は空白のページです。Maps APIに地図が表示されません

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Marker Labels</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?key=NUMBER OFMYKEY&signed_in=true"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="app.js"> 
    <script> 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
</html>

dados.json

{ 
     "universities": [ 
      { 
       "title": "Aberystwyth University", 
       "website": "www.aber.ac.uk", 
       "phone": "+44 (0)1970 623 111", 
       "lat": 52.415524, 
       "lng": -4.063066}, 
      { 
       "title": "Bangor University", 
       "website": "www.bangor.ac.uk", 
       "phone": "+44 (0)1248 351 151", 
       "lat": 53.229520, 
       "lng": -4.129987}, 
      { 
       "title": "Cardiff Metropolitan University", 
       "website": "www.cardiffmet.ac.uk", 
       "phone": "+44 (0)2920 416 138", 
       "lat": 51.482708, 
       "lng": -3.165881} 
     ] 
    }

app.js

function getLocal(callback){ 
    $.getJSON("localhost/dados/dados.json", callback); 
}; 

    function initialize() { 
    var myLatLng = new google.maps.LatLng(52.415524, 4.063066); 
    var mapOptions = { 
     zoom: 10, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    } 
    var map = new google.maps.Map(document.getElementById('map'),mapOptions); 

    getLocal(function(data){ 
    var locals = data.universities; 
    var local, latLng; 

    for(i in universities){ 
     local= universities[i]; 
     latLng = new google.maps.LatLng(local.lat, local.lng); 

     var marker = new google.maps.Marker({ 
     position: latLng, 
     label: "D", 
     map: map, 
     title: local.title 
     }); 
    } 
    }); 
}

UPDATE：

コンソールにおける追従誤差：

jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/noot01/Dropbox/Lucas%20Torres/Projetos/_teste/dengue/denge_teste2/localhost/dados/dados.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

出典

2016-05-15 Lucas Torres

実際には、本番環境でfile：//プロトコルを使用してJSONをロードしていますか？これは、エラーメッセージごとに動作しないことです。 – geocodezip

にも幅を割り当ててみます。この行の 2つのエラー：

mapTypeId: google.mapsp.mapTypeId.ROADMAP 
//--------------------^-^

を、それは

する必要があります

mapTypeId: google.maps.MapTypeId.ROADMAP

出典

2016-05-15 22:43:25

修正済み！しかし、まだ動作していません –

ええ男、地図は、今すぐ表示されていますが、まだjsonアーカイブマーカーがない –

あなたはさらに<script src="app.js">

のためのクロージング</script>を逃している

<style> 
    html, body { 
    height: 100%; 
    width:100%; 
    margin: 0; 
    padding: 0; 
    } 
    #map { 
    height: 100%; 
    width: 500px; 
    } 
</style>

出典

2016-05-15 22:34:50 scaisEdge

Maps APIに地図が表示されません

答えて

関連する問題