此页面未正确加载 Google 地图。有关技术详细信息，请参阅 JavaScript 控制台
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37403731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
This page didn't load Google Maps correctly. See the JavaScript console for technical details
提问by stonework
I am using this code from Google Map API's and it is not working
我正在使用Google Map API's 中的此代码，但它不起作用
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="map"></div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** @type {!HTMLInputElement} */(
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
回答by EmanueleF
Google recently changedthe terms of use of its Google Maps APIs; if you were already using them on a website (different from localhost) prior to June 22nd, 2016, nothing will change for you; otherwise, you will get the aforementioned issue and need an API key in order to fix your error. The free API key is valid up to 25,000 map loads per day.
Google最近更改了其 Google Maps API 的使用条款；如果您在2016 年 6 月 22 日之前已经在网站（不同于本地主机）上使用它们，那么您不会有任何改变；否则，您将遇到上述问题并需要一个 API 密钥来修复您的错误。免费的 API 密钥每天最多可加载 25,000 次地图。
In this article you will find everything you may need to know regarding the topic, including a tutorial to fix your error:
在本文中，您将找到关于该主题可能需要了解的所有信息，包括修复错误的教程：
Google Maps API error: MissingKeyMapError [SOLVED]
Google Maps API 错误：MissingKeyMapError [已解决]
Also, remember to replace YOUR_API_KEY with your actual API key!
另外，请记住将 YOUR_API_KEY 替换为您的实际 API 密钥！
回答by C. Adams
The fix is really simple: just replace YOUR_API_KEY on the last line of your code with your actual API key!
修复方法非常简单：只需将代码最后一行的 YOUR_API_KEY 替换为您的实际 API 密钥即可！
If you don't have one, you can get it for free on the Google Developers Website.
如果您没有，可以在Google Developers 网站上免费获取。
回答by Nazwa Asshiba
There are 2 possibilities for this problem :
这个问题有两种可能性：
- you didn't enter the API KEY for map browser
- you didn't enabling the API Library especially for this Google Maps JavaScript API
- 您没有输入地图浏览器的 API KEY
- 你没有特别为这个 Google Maps JavaScript API 启用 API 库
just check on your Google developer console for that 2 items
只需在您的 Google 开发者控制台上查看这 2 个项目
回答by pcodex
You could also get the error if your Billing is not set up correctly.
如果您的帐单设置不正确，您也可能会收到错误消息。
Google hands out credit worth $300 or 12 months of free usage whichever runs out faster. After that you would need to enable billing.
Google 会发放价值 300 美元的信用额度或 12 个月的免费使用期，以用完的速度为准。之后，您需要启用计费。
