如何正確添加谷歌地圖到html頁面？

-2

最近我嘗試使用Google API添加谷歌地圖到網頁，但無法做到這一點。我怎樣才能解決這個問題？我需要幫助來解決這個問題。這可以作爲html文件運行，但是當我嘗試使用本地服務器時，腳本無法加載。如何正確添加谷歌地圖到html頁面？

<script> 
    function avMap(){ 
    var myCanvas = document.getElementById('map1'); 
    var mapCenter = new google.maps.LatLng(6.949707,80.1831939); 
    var mapOptions = { 
     center: mapCenter, 
     zoom:11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN 
    }; 
    var mapAv = new google.maps.Map(myCanvas, mapOptions); 
    var marker1 = new google.maps.Marker({ 
      position: mapCenter, 
      animation: google.maps.Animation.BOUNCE, 
      draggable: false 
     }); 
    marker1.setMap(mapAv); 
    var marker2 = new google.maps.Marker({ 
      position: {lat: 6.4692368, lng: 80.5755751}, 
      animation: google.maps.Animation.DROP, 
      draggable: false 
     }); 
    marker2.setMap(mapAv); 
    //info-window 
    var avNote = "<p>"+"Avissawella is the most beautiful area in Sabaragamuwa/Western border."+" "+"For more details, please visit"+ 
    " "+"<a href='https://en.wikipedia.org/wiki/Avissawella'"+ "target='_blank'>"+"this link"+"</a>"; 
    var infoWin = new google.maps.InfoWindow({ 
     content: avNote, 
     maxWidth:200 
    }); 
    infoWin.open(mapAv, marker1); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script>

來源

2016-11-26 Nimsara Madhubashini

你的API密鑰在哪裏？ –

' ' Please rever to https://developers.google.com/ maps/documentation/javascript/tutorial – RizkiDPrast

添加地圖到服務器需要API密鑰嗎？我可以正確打開它作爲本地文件，只有當我用它從遠程或本地服務器運行它時纔會出現問題。 –

您在腳本include中缺少async defer。

<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script>

應該是：

<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script>

proof of concept fiddle

代碼片斷：

html, 
 
body, 
 
#map1 { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script> 
 
    function avMap() { 
 
    var myCanvas = document.getElementById('map1'); 
 
    var mapCenter = new google.maps.LatLng(6.949707, 80.1831939); 
 
    var mapOptions = { 
 
     center: mapCenter, 
 
     zoom: 11, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN 
 
    }; 
 
    var mapAv = new google.maps.Map(myCanvas, mapOptions); 
 
    var marker1 = new google.maps.Marker({ 
 
     position: mapCenter, 
 
     animation: google.maps.Animation.BOUNCE, 
 
     draggable: false 
 
    }); 
 
    marker1.setMap(mapAv); 
 
    var marker2 = new google.maps.Marker({ 
 
     position: { 
 
     lat: 6.4692368, 
 
     lng: 80.5755751 
 
     }, 
 
     animation: google.maps.Animation.DROP, 
 
     draggable: false 
 
    }); 
 
    marker2.setMap(mapAv); 
 
    //info-window 
 
    var avNote = "<p>" + "Avissawella is the most beautiful area in Sabaragamuwa/Western border." + " " + "For more details, please visit" + 
 
     " " + "<a href='https://en.wikipedia.org/wiki/Avissawella'" + "target='_blank'>" + "this link" + "</a>"; 
 
    var infoWin = new google.maps.InfoWindow({ 
 
     content: avNote, 
 
     maxWidth: 200 
 
    }); 
 
    infoWin.open(mapAv, marker1); 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script> 
 
<div id="map1"></div>

來源

2016-11-26 13:15:34 geocodezip

謝謝親愛的。此代碼段提供了一條錯誤消息： Google Maps API警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys 我搜索了關於API密鑰的信息。正常的API密鑰和高級密鑰之間有什麼區別？我應該選擇什麼？ –

API密鑰現在是必需的（SO和jsfiddle是爲無鑰匙訪問而設的）。除非您需要高級密鑰（和/或想要付費），否則您應該獲得正常的API密鑰。 – geocodezip

如果這回答您的原始問題，請[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work） – geocodezip

如何正確添加谷歌地圖到html頁面？

回答

相關問題