Html Google Places API 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18345875/
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
Google Places API example
提问by agconti
The Problem
问题
I've been trying to get thisgoogle maps API example working but after copying the code exactly from google's site, the example fails to render properly. ie the map completely fails to render, search bar is -350px of the page ect.
我一直在尝试让这个google maps API 示例正常工作，但是在完全从 google 站点复制代码后，该示例无法正确呈现。即地图完全无法呈现，搜索栏是页面等的-350px。
To see what I mean, check out this JSfiddle.
要了解我的意思，请查看此JSfiddle。
The example works great on Google's above mentioned documentation page, so I know its something I'm doing. Any ideas?
该示例在 Google 上面提到的文档页面上效果很好，所以我知道我正在做的事情。有任何想法吗？
EDIT: I got the css from google's site, but still the problem persists.
编辑：我从谷歌的网站得到了 css，但问题仍然存在。
Below is the code causing the problems:
下面是导致问题的代码：
<!DOCTYPE html>
<html>
<head>
<title>Places Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="CSS/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<style>
input {
border: 1px solid rgba(0, 0, 0, 0.5);
}
input.notfound {
border: 2px solid rgba(255, 0, 0, 0.4);
}
</style>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
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
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
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);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left: -260px">
<input id="searchTextField" type="text" size="50">
<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-geocode">
<label for="changetype-geocode">Geocodes</lable>
</div>
<div id="map-canvas"></div>
</body>
</html>
采纳答案by wf9a5m75
JS field doesn't accept Google Maps API library for external resources. (I'm not sure why) So you need to insert <script>tag into the body field.
JS 字段不接受外部资源的 Google Maps API 库。（我不知道为什么）所以你需要在 body 字段中插入 <script> 标签。
And JS field generates "window.onload" automatically. You don't have to write "google.maps.event.addDomListener" in JS field.
并且 JS 字段自动生成“window.onload”。您不必在 JS 字段中编写“google.maps.event.addDomListener”。
http://jsfiddle.net/wf9a5m75/NpYwE/27/
http://jsfiddle.net/wf9a5m75/NpYwE/27/
<div id="panel" style="margin-left: -260px">
<input id="searchTextField" type="text" size="50">
<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-geocode">
<label for="changetype-geocode">Geocodes</lable>
</div>
<div id="map-canvas"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
回答by geocodezip
You will notice the errors in the javascript console:
您会注意到 javascript 控制台中的错误：
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/maps/documentation/javascript/examples/default.css
Uncaught ReferenceError: google is not defined fiddle.jshell.net/agconti/NpYwE/show/:133
You aren't including the google API script correctly on the fiddle.
您没有在小提琴上正确包含 google API 脚本。
