I have a program that has a modal, which inside the modal has an address bar and several (disabled) form-control inputs. When using the address bar, autocomplete suggestions are given, and once the user selects their address, the form control inputs autocomplete with the relevant information relating to the address searched. The jQuery used for such functionality was acquired from: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
I have 3 separate modals, all of which are suppose to do the same thing, however, as it stands only one of them work. I have tried to rename all the variables in the HTML section (by adding a 1), and i have repeated the jQuery code (also by adding a 1 to all repeating variables). The chrome console throws no errors and the code compiles as expected, however for the other 2 modals, the autocomplete functionality does not work at all.
First Modal (part of its code) which works:
<div id="locationField">
<input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
</div>
<br />
<div>
<img class="map-image" src="~/Images/yellow-map.PNG" />
</div>
<div>
<label class="label-address">Street address</label>
<input class="form-control" id="street_number1" style="text-align: left" readonly />
<input class="form-control" id="route1" readonly />
<label class="label-address">City</label>
<input class="form-control" id="locality1" readonly />
<label class="label-address">Province</label>
<input class="form-control" id="administrative_area_level_11" readonly />
<label class="label-address">Zip Code</label>
<input class="form-control" id="postal_code1" readonly />
<label class="label-address">Country</label>
<input class="form-control" id="country1" readonly />
</div>
The jQuery code (copied from the link mentioned above) for the modal which works:
//Autocomplete Address Form (DONATOR)
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'), { types: ['geocode'] });
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(['address_component']);
// When the user selects an address from the drop-down, 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();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle(
{ center: geolocation, radius: position.coords.accuracy });
autocomplete.setBounds(circle.getBounds());
});
}
}
Second Modal (part of its code) which does not work:
<div id="locationField">
<input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
</div>
<br />
<div>
<img class="map-image" src="~/Images/yellow-map.PNG" />
</div>
<div>
<label class="label-address">Street address</label>
<input class="form-control" id="street_number1" style="text-align: left" readonly />
<input class="form-control" id="route1" readonly />
<label class="label-address">City</label>
<input class="form-control" id="locality1" readonly />
<label class="label-address">Province</label>
<input class="form-control" id="administrative_area_level_11" readonly />
<label class="label-address">Zip Code</label>
<input class="form-control" id="postal_code1" readonly />
<label class="label-address">Country</label>
<input class="form-control" id="country1" readonly />
</div>
The jQuery code (copied from the link mentioned above) for the modal which does not work:
var placeSearch1, autocomplete;
var componentForm1 = {
street_number1: 'short_name',
route1: 'long_name',
locality1: 'long_name',
administrative_area_level_11: 'short_name',
country1: 'long_name',
postal_code1: 'short_name'
};
function initAutocomplete1() {
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete1'), { types: ['geocode'] });
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(['address_component']);
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener('place_changed', fillInAddress1);
}
function fillInAddress1() {
// Get the place details from the autocomplete object.
var place1 = autocomplete.getPlace();
for (var component1 in componentForm1) {
document.getElementById(component1).value = '';
document.getElementById(component1).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
for (var i1 = 0; i1 < place1.address_components.length; i1++) {
var addressType1 = place1.address_components[i1].types[0];
if (componentForm1[addressType1]) {
var val1 = place1.address_components[i1][componentForm1[addressType1]];
document.getElementById(addressType1).value = val1;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate1() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle(
{ center: geolocation, radius: position.coords.accuracy });
autocomplete.setBounds(circle.getBounds());
});
}
}
I assume the issue lies in the repeating jQuery code? Otherwise im not sure. Some guidance would be appreciated.