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

Вы действительно собираетесь загрузить JSON, используя файл: // протокол на производстве? Это то, что isn: t работает за сообщение об ошибке. – geocodezip

Вы упускаете закрытие </script> для <script src="app.js">

Дополнительно: 2 ошибки в этой строке:

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

должно быть

mapTypeId: google.maps.MapTypeId.ROADMAP

источник

2016-05-15 22:43:25

Исправлено! Но все еще не работает –

Да, человек, карты сейчас показывают, но json-архив с маркерами еще нет –

Try ширина Назначают также

<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 не отображает карту

ответ

Смежные вопросы