此页面未正确加载 Google 地图.有关技术详细信息，请参阅 JavaScript 控制台 [英] This page didn't load Google Maps correctly. See the JavaScript console for technical details
问题描述
我正在使用 Google Map API 中的此代码，但它不起作用
<头><title>地方自动完成</title><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><风格>html，正文{高度:100%；边距:0；填充:0；}#地图 {高度:100%；}.controls {边距顶部:10px；边框:1px 实心透明；边界半径:2px 0 0 2px；box-sizing: 边框框；-moz-box-sizing: 边框框；高度:32px；大纲:无；box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}#pac-输入{背景色:#fff;字体系列:Roboto；字体大小:15px；字体粗细:300；左边距:12px；填充:0 11px 0 13px；文本溢出:省略号；宽度:300px；}#pac-输入:焦点{边框颜色:#4d90fe；}.pac-容器{字体系列:Roboto；}#类型选择器{颜色:#fff;背景颜色:#4d90fe；填充:5px 11px 0px 11px；}#类型选择器标签{字体系列:Roboto；字体大小:13px；字体粗细:300；}</风格><身体><input id="pac-input" class="controls" type="text"placeholder="输入位置"><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-buildingment"><label for="changetype-establishment">建立</label><input type="radio" name="type" id="changetype-address"><label for="changetype-address">地址</label><input type="radio" name="type" id="changetype-geocode"><label for="changetype-geocode">Geocodes</label><div id="地图"></div><脚本>//此示例需要 Places 库.包括图书馆=地点//首次加载 API 时的参数.例如://<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">函数 initMap() {var map = new google.maps.Map(document.getElementById('map'), {中心:{lat:-33.8688，lng:151.2195}，变焦: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 标记 = 新的 google.maps.Marker({地图:地图，锚点:新 google.maps.Point(0, -29)});autocomplete.addListener('place_changed', function() {infowindow.close();标记.setVisible(false);var place = autocomplete.getPlace();如果(！地方.几何){window.alert("自动完成返回的位置不包含几何图形");返回;}//如果该地点有几何图形，则将其显示在地图上.如果(地方.几何.视口){map.fitBounds(place.geometry.viewport);} 别的 {map.setCenter(place.geometry.location);地图.setZoom(17);//为什么是 17?因为它看起来不错.}marker.setIcon(/** @type {google.maps.Icon} */({网址:place.icon，大小:新的 google.maps.Size(71, 71)，原点:新 google.maps.Point(0, 0),锚点:新 google.maps.Point(17, 34),scaledSize: 新的 google.maps.Size(35, 35)}));标记.setPosition(place.geometry.location);标记.setVisible(真)；无功地址 = '';如果(place.address_components){地址 = [(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 || '')].加入(' ');}infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 地址);infowindow.open(地图，标记)；});//在单选按钮上设置侦听器以更改地点上的过滤器类型//自动完成.函数 setupClickListener(id, types) {var radioButton = document.getElementById(id);radioButton.addEventListener('click', function() {autocomplete.setTypes(types);});}setupClickListener('changetype-all', []);setupClickListener('changetype-address', ['address']);setupClickListener('changetype-buildingment', ['establishment']);setupClickListener('changetype-geocode', ['geocode']);}<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"异步延迟></script>
修复方法非常简单:只需将代码最后一行的 YOUR_API_KEY 替换为您的实际 API 密钥即可！
如果您没有，可以在 Google 开发者网站.
I am using this code from Google Map API's and it is not working
<!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>
The fix is really simple: just replace YOUR_API_KEY on the last line of your code with your actual API key!
If you don't have one, you can get it for free on the Google Developers Website.
这篇关于此页面未正确加载 Google 地图.有关技术详细信息，请参阅 JavaScript 控制台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
