Javascript 绑定谷歌在文本框上放置自动完成而不实例化谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12024629/
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
bind google places autocomplete on textbox without instantiating a google map
提问by MeepMerp
I'm trying to add Google Places Autocomplete on my Website. I'm having a problem with binding my search textbox with Autocomplete without the use of instantiating a google map. What I'm trying to do is, I want to use the autocomplete as a text suggestion on my search field. but sadly, all the tutorials I've seen had autcomplete being used along with a google map. Is there any way around this?
我正在尝试在我的网站上添加 Google 地方信息自动完成功能。我在不使用实例化谷歌地图的情况下将我的搜索文本框与自动完成绑定时遇到问题。我想要做的是，我想在我的搜索字段中使用自动完成功能作为文本建议。但遗憾的是，我见过的所有教程都使用了 autcomplete 和谷歌地图。有没有办法解决？
Thanks in advance.
提前致谢。
回答by Mohit
Guys you can use following code.
伙计们，您可以使用以下代码。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
});
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
Edit: Google Maps now require an API keyfor this to work.
编辑：谷歌地图现在需要一个API 密钥才能工作。
回答by user2309181
This is a pretty old thread but google now requires an API for all of their maps based services and I felt that the code example could be simplified a little.
这是一个很老的线程，但谷歌现在需要一个 API 来处理所有基于地图的服务，我觉得代码示例可以稍微简化一下。
Inside head element (update code with your input element id attribute):
内部 head 元素（使用您的输入元素 id 属性更新代码）：
<script type="text/javascript">
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('YOUR_INPUT_ELEMENT_ID')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
</script>
Inside your page confirm you have a text input with an ID attribute that matches the above script:
在您的页面内，确认您有一个文本输入，其 ID 属性与上述脚本相匹配：
<input type="text" id="YOUR_INPUT_ELEMENT_ID" />
Just before the close of your body tag add this script (update with your own API key):
在 body 标签结束之前添加此脚本（使用您自己的 API 密钥更新）：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
Other notes:
其他注意事项：
- This is a slightly modified version of the original help/example article found here
- You need an active API key for Google Places API Web Service and to enable Google Maps Javascript API from Google Developer Console
- 这是此处找到的原始帮助/示例文章的略微修改版本
- 您需要一个用于 Google Places API Web 服务的有效 API 密钥并从Google Developer Console启用 Google Maps Javascript API
回答by Aravind Srinivas
Just replace the Secretkey with your api key.
只需用您的 api 密钥替换 Secretkey。
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?key=Secretkey&libraries=places" async defer></script>
<script>
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */
(document.getElementById('autocomplete')),
{ types: ['geocode'] }
);
google.maps.event.addListener(autocomplete, 'place_changed', function() {});
}
</script>
</head>
<div id="locationField">
<input id="autocomplete" name="location" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
For getting your api key https://developers.google.com/maps/documentation/javascript/get-api-key
获取您的 api 密钥https://developers.google.com/maps/documentation/javascript/get-api-key
回答by Bryan
See this Google Geo Dev blog post: http://googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html
请参阅此 Google Geo Dev 博客文章：http: //googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html
It has links to the relevant methods, including Autocomplete.getPlace()
它有相关方法的链接，包括 Autocomplete.getPlace()
It also notes that, "You are free to use Autocomplete in any application, even if you are not displaying a map. All we ask is that you display the ‘powered by Google' logo under the text field when you use Autocomplete without a map".
它还指出，“您可以在任何应用程序中自由使用自动完成功能，即使您没有显示地图。我们所要求的是，当您在没有地图的情况下使用自动完成功能时，在文本字段下显示“由 Google 提供支持”的标志”。
回答by Alpesh Trivedi
function initialize()
{
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(input),
{
types: ['(cities)'],
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
//document.getElementById('fLat').value = place.geometry.location.lat();
//document.getElementById('fLong').value = place.geometry.location.lng();
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(' ');
}
LoadEventCategory();
LoadYelpData();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
回答by Developer
try this also
也试试这个
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete_search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
$('#lat').val(place.geometry['location'].lat());
$('#long').val(place.geometry['location'].lng());
});
}
</script>
回答by Rahul S
You can use below code , just replace key with your gmaps key
您可以使用下面的代码，只需用您的 gmaps 键替换键
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Search Box</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#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: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map" style="height: 200px;width: 200px"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// 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 initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=your key&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
Thanks,
谢谢，
回答by anuja
<div class="col-sm-4">
<span class="input input--hoshi">
<input class="input__field input__field--hoshi" id="taddress" type="text" placeholder="" onmouseover="notnull2(this)" onblur="validtaddr(this); validateaddr2(this);" >
<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="dateto">
<span class="input__label-content input__label-content--hoshi">To</span>
</label>
</span>
<div id="taddress-error" style="color:red"></div>
<script>
function validtaddr() {
if (IsplaceChange == false)
{
if ($("#taddress").val != "") {
$("#taddress-error").html(" ");
}
$("#taddress").val(null)
// $("#faddress-error").html("please Enter valid location");
}
};
</script>
<script>
var autocomplete;
function initialize1() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('taddress')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
});
}
</script>
<script>
var IsplaceChange = false;
$(document).ready(function () {
var input = document.getElementById('taddress');
var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
IsplaceChange = true;
});
$("#taddress").keydown(function () {
IsplaceChange = false;
});
});
</script>
<script>
$("#taddress").keyup(function () {
var a = $("#taddress").val();
if (a.match(/^[ t`~!@@#$%^&*()_|+\-=?;:'"<>\{\}\[\]\\/]+/gi)) {
$("#taddress-error").html("White space & special char are not allow");
$("#taddress").val(null);
//document.form1.text1.focus();
return false;
}
else {
$("#taddress-error").html("");
//document.form1.text1.focus();
return true;
}
});
</script>
<script>
function validateaddr2() {
if ($("#taddress").val() == "")
{
$("#taddress-error").html("Please enter valid location");
return false;
}
else {
$("#taddress-error").html("");
}
}
function notnull2() {
if ($("#taddress").val != "") {
$("#taddress-error").html(" ");
}
else {
$("#taddress-error").html(" Please enter valid location");
}
}
</script>
</div>
