没有API密钥的Google Map API v3示例来自他们的网站，但没有使用密钥。我究竟做错了什么？ [英] Google Map API v3 example from their site doesn't work without an API key but does with a Key. What am I doing wrong?
本文介绍了没有API密钥的Google Map API v3示例来自他们的网站，但没有使用密钥。我究竟做错了什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题：我正尝试使用Google Map API v3的样本，但没有API密钥，并且没有呈现。 （它会渲染，如果我使用一个键）。任何人都知道为什么？
我决定使用这个例子
（ https://developers.google.com/maps/documentation/javascript/examples/polyline-simple ）
为了让它在没有密钥的情况下工作，我替换了这个脚本：
< script async defer src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap>< / script>
与其他脚本
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
这是代码：
<！DOCTYPE html>< html> < HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> < meta charset =utf-8> < title>简单多段线< / title> <风格> html，body {height：100％;保证金：0;填充：0; } #map {height：100％; }< / style> < /头> <身体GT; < div id =map>< / div> < script> //此示例创建一个2像素宽的红色折线，显示William // Kingsford Smith在加利福尼亚州奥克兰和澳大利亚布里斯班之间的第一个跨太平洋航线的路径。function initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：3，center：{lat：0，lng：-180}，mapTypeId：google.maps.MapTypeId.TERRAIN}）; var flightPlanCoordinates = {{lat：37.772，lng：-122.214}，{lat：21.291，lng：-157.821}，{lat：-18.142，lng：178.431}，{lat：-27.467，lng：153.027}]; var flightPath = new google.maps.Polyline（{path：flightPlanCoordinates，geodesic：true，strokeColor：'＃FF0000'，strokeOpacity：1.0，strokeWeight：2}）; flightPath.setMap（map）;}< / script> < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> < / body>< / html>
不渲染。任何想法我做错了什么？感谢！ 解决方案
将Google地图脚本包含到头部。它必须被包含在你调用之前。
调用你的initMap函数来运行你设置的函数。 函数initMap（）只是被定义了，但是直到那时你才运行它。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>简单多段线< / title>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
#map {
height：100％;
}
< / style>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< / head>
< body>
< div id =map>< / div>
< script>
//此示例创建一个2像素宽的红色多段线，显示William
// Kingsford Smith在加利福尼亚州奥克兰之间的第一次跨太平洋航班的航程和
/ /澳大利亚布里斯班。
函数initMap（）{
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：3，
center ：{lat：0，lng：-180}，
mapTypeId：google.maps.MapTypeId.TERRAIN
}）;
var flightPlanCoordinates = [
{lat：37.772，lng：-122.214}，
{lat：21.291，lng：-157.821}，
{lat： - 18.142，lng：178.431}，
{lat：-27.467，lng：153.027}
];
var flightPath = new google.maps.Polyline（{
path：flightPlanCoordinates，
geodesic：true，
strokeColor：'＃FF0000'，
strokeOpacity：1.0，
strokeWeight：2
}）;
flightPath.setMap（map）;
}
initMap（）;
< / script>
< / body>
< / html>
Problem: I am trying to use a sample of Google Map API v3 without an API key and it doesn't render. (It does render if I use a key).Anyone know why?
I decided to use this example (https://developers.google.com/maps/documentation/javascript/examples/polyline-simple)
In order to make it work without a key I replaced this script:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
with this other script
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</body>
</html>
But it doesn't render. Any idea what am I doing wrong? Thanks!
解决方案
Move the google maps script include into the head. It has to be included before you call it.
Call your initMap function to run the function you set up. The function initMap() has only been defined, but you haven't run it until then.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
initMap();
</script>
</body>
</html>
这篇关于没有API密钥的Google Map API v3示例来自他们的网站，但没有使用密钥。我究竟做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
