Я хочу включить 2 экземпляра автозаполнения Google Адресов на одной странице. Глядя на настройку входа для местоположения перехвата и ввода для местоположения отсечки.
Я предполагаю, что это связано с идентификатором элемента ввода, но даже когда я изменил его на класс, он все еще не работал.
Это то, что у меня есть в настоящее время, и оно работает для первого поля, но я не могу понять, как получить второе поле ввода для автоматического завершения или даже показать какие-либо признаки того, чтобы быть чем-то другим, кроме простого текста ввода поле.
Любая помощь очень ценится!
<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>
