在同一页面上添加多个Google商家信息实例 [英] Adding Multiple Instances of Google Places on Same Page
问题描述
我希望在同一页面上包含2个Google商家信息自动填写实例。希望设置一个Pickup Location的输入和一个Dropoff Location的输入。
I'm looking to include 2 instances of Google Places auto-complete on the same page. Looking to setup an input for a Pickup Location and an input for a Dropoff Location.
我假设它与输入元素的ID有关，但是当我把它改成一个类时，它仍然没有工作。
I'm assuming it has to do with the ID of the input element, but even when I changed it to a class, it still wasn't working.
这是我现在拥有的，它适用于第一个字段，但我不能弄清楚如何让第二个输入字段自动完成，或者甚至显示除了普通输入文本字段之外的任何其他信号。
This is what I currently have, and it works for the first field, but I can't figure out how to get a second input field to auto complete, or even show any signs of being anything other than a plain input text field.
非常感谢任何帮助！
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
var placeSearch,autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in component_form) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
}
for (var j = 0; j < place.address_components.length; j++) {
var att = place.address_components[j].types[0];
if (component_form[att]) {
var val = place.address_components[j][component_form[att]];
document.getElementById(att).value = val;
}
}
}
</script>
HTML
<body onload="initialize()">
<form action="" method="post" name="theform" id="theform">
<label>Pickup Location</label>
<input type="text" name="PickupLocation" onfocus="geolocate()" placeholder="Enter your pickup location" id="autocomplete" autocomplete="off" />
<label>Dropoff Location</label>
<input type="text" name="DropoffLocation" onfocus="geolocate()" placeholder="Enter your dropoff location" id="autocomplete2" autocomplete="off" />
</form>
</body>
推荐答案
这只是问题。
您使用两个IDautocomplete和autocomplete2
但仅初始化IDautocomplete。
尝试添加此代码以初始化（）。
It is simply problem.
You using two IDs "autocomplete" and "autocomplete2"
but initialized only ID "autocomplete".
Try add this code to initialize().
Javascript
autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
fillInAddress();
});
这篇关于在同一页面上添加多个Google商家信息实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
