Google Maps v3 api for localhost无法正常工作 [英] Google Maps v3 api for localhost not working
问题描述
我想尝试一下实现Gmaps v3的示例演示，并从Google的文档中尝试了这个示例，但没有输出，页面只加载了几秒钟，然后空白，没有输出。 b
$ b
<！DOCTYPE html>
< html lang =en>
< head>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
＃map-canvas {height：100％}
< / style>
< title> GMaps Demo< / title>
< script src =https://maps.googleapis.com/maps/api/js？
key = $ {API_KEY}& sensor = false>
< / script>
< script>
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（-34.397,150.644），
zoom：8，
mapTypeId： google.maps.MapTypeId.ROADMAP
};
var map = google.maps.Map（
document.getElementById（map-canvas），
mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>
< / div>
< / body>
< / html>
首先：不再需要API密钥，因此您可以使用 $ b
https://maps.googleapis.com/maps/api/ js？sensor = false
作为网址。
（正如Jeff Hoye指出的那样，截至2016年6月22日，API密钥仍然是必需的。）
然后您忘记了这一行中的新：
var map = new google.maps .Map（document.getElementById（map-canvas），mapOptions）;
使用这些更改将显示地图。 p>
I wanted to try out a sample demo of implementing Gmaps v3 and tried out this example from Google's documentation, but there is no output , the page just loads for a few seconds and then blank, no output.
<!DOCTYPE html>
<html lang = "en">
<head>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0; padding: 0}
#map-canvas{height: 100%}
</style>
<title>GMaps Demo</title>
<script src = "https://maps.googleapis.com/maps/api/js?
key=${API_KEY}&sensor=false">
</script>
<script>
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = google.maps.Map(
document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id = "map-canvas">
</div>
</body>
</html>
First of all: Google Maps 3 does not need an api key anymore, so you are fine with
https://maps.googleapis.com/maps/api/js?sensor=false
as an URL.
(As Jeff Hoye pointed out, as of June 22, 2016, an API Key is required again.)
And then you forgot the "new" in this line:
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
With those changes your map will be displayed.
这篇关于Google Maps v3 api for localhost无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
