如何正确添加谷歌地图到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页面？

回答

相关问题