Google Maps set a text field value when address is selected - google-maps

Question

I'm trying to work out how to set the value of a text field called rehabGroup when I do an search for an address.
The autocomplete form I'm using consists of 2 maps.
I need to take the value from the locality returned result and use it to search through a list of names to return the result to a text field.
I can do it with an autocomplete search but I really need it to do it automatically when the result from the search is selected.
This is a snippet of the HTML
<div id="map2"></div>
<div class="form-group">
<label class="control-label" for="autocomplete2">Search for Encounter Address</label>
<i class="h5 fas fa-map-pin"></i>
<div class="input-group">
<input id="autocomplete2" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="locality">Town/Suburb</label>
<i class="h5 far fa-map"></i>
<div class="input-group">
<input type="text" class=" form-control rounded" id="locality2" name="locality2" placeholder="Town of the rescue" data-toggle="tooltip" title="Town of rescue" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="rehabGroup">Rehab Group</label>
<i class="h5 fas fa-map-pin"></i>
<div class="input-group">
<input type="text" id="rehabGroup" name="rehabGroup" value="" />
</div>
</div>
This is the code i've been using
<script>
$(function() {
$('#locality2').autocomplete({
source: 'ajax.php',
minLength: 3,
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
$(this).focus();
}
},
select: function(event, ui) {
$('#rehabGroup').val(ui.item.rehabGroup);
}
});
});
let placeSearch, autocomplete, autocomplete2;
let componentForm = {
subpremise: 'long_name',
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
administrative_area_level_2: 'long_name',
country: 'long_name',
postal_code: 'short_name',
latitude: 'long_name',
longitude: 'short_name'
};
let defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-32.889049, 151.600815),
new google.maps.LatLng(-32.506633, 152.340289)
);
let map1 = new google.maps.Map(document.getElementById('map1'), {
center: {
lat: -32.732140,
lng: 152.039616
},
zoom: 11
});
let map2 = new google.maps.Map(document.getElementById('map2'), {
center: {
lat: -32.732140,
lng: 152.039616
},
zoom: 11
});
let marker1 = new google.maps.Marker({
map: map1,
draggable: true
});
let marker2 = new google.maps.Marker({
map: map2,
draggable: true
});
google.maps.event.addListener(marker1, 'dragend',
function(marker1) {
let latLng1 = marker1.latLng;
currentLatitude1 = latLng1.lat();
currentLongitude1 = latLng1.lng();
$('#lat').val((currentLatitude1).toFixed(6));
$('#lng').val((currentLongitude1).toFixed(6));
}
);
google.maps.event.addListener(marker2, 'dragend',
function(marker2) {
let latLng2 = marker2.latLng;
currentLatitude2 = latLng2.lat();
currentLongitude2 = latLng2.lng();
$('#lat2').val((currentLatitude2).toFixed(6));
$('#lng2').val((currentLongitude2).toFixed(6));
}
);
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
bounds: defaultBounds,
types: [
'geocode'
],
strictBounds: true,
componentRestrictions: {
country: 'au'
}
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function() {
fillInAddress(autocomplete, '');
});
autocomplete2 = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
bounds: defaultBounds,
types: [
'geocode'
],
strictBounds: true,
componentRestrictions: {
country: 'au'
}
});
autocomplete2.addListener('place_changed', function() {
fillInAddress(autocomplete2, '2');
});
}
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
let place = autocomplete.getPlace();
if (unique === '2'){
if (place.geometry.viewport) {
map2.fitBounds(place.geometry.viewport);
} else {
map2.setCenter(place.geometry.location);
map2.setZoom(14);
}
marker2.setPosition(place.geometry.location);
marker2.setVisible(true);
}else{
if (place.geometry.viewport) {
map1.fitBounds(place.geometry.viewport);
} else {
map1.setCenter(place.geometry.location);
map1.setZoom(14);
}
marker1.setPosition(place.geometry.location);
marker1.setVisible(true);
}
for (let component in componentForm) {
if (!!document.getElementById(component + unique)) {
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).disabled = false;
}
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (let i = 0; i < place.address_components.length; i++) {
let addy = '';
let addressTypes = place.address_components[i].types;
for (let j = 0; j < addressTypes.length; j++) {
let addressType = addressTypes[j];
if (componentForm[addressType] && document.getElementById(addressType + unique)) {
addy = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = addy;
}
}
}
document.getElementById('lat' + unique).value = place.geometry.location.lat().toFixed(6);
document.getElementById('lng' + unique).value = place.geometry.location.lng().toFixed(6);
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>
TIA

Answer 1

Looks like you're able to populate an address form successfully once an address is selected from the Autocomplete dropdown. You just need to add another step to the to fillInAddress() when you find the locality component of the address to call your custom function that searches for your group names and populates the text field.
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
let place = autocomplete.getPlace();
if (unique === '2'){
if (place.geometry.viewport) {
map2.fitBounds(place.geometry.viewport);
} else {
map2.setCenter(place.geometry.location);
map2.setZoom(14);
}
marker2.setPosition(place.geometry.location);
marker2.setVisible(true);
}else{
if (place.geometry.viewport) {
map1.fitBounds(place.geometry.viewport);
} else {
map1.setCenter(place.geometry.location);
map1.setZoom(14);
}
marker1.setPosition(place.geometry.location);
marker1.setVisible(true);
}
for (let component in componentForm) {
if (!!document.getElementById(component + unique)) {
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).disabled = false;
}
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (let i = 0; i < place.address_components.length; i++) {
let addy = '';
let addressTypes = place.address_components[i].types;
for (let j = 0; j < addressTypes.length; j++) {
let addressType = addressTypes[j];
if (componentForm[addressType] && document.getElementById(addressType + unique)) {
addy = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = addy;
}
if (addressType == 'locality') {
// Perform your custom search on this locality and populate the result in text field rehabGroup
let locality = place.address_components[i]['long_name'];
let result = yourCustomSearch(locality);
document.getElementbyId('rehabGroup').value = result;
}
}
}
document.getElementById('lat' + unique).value = place.geometry.location.lat().toFixed(6);
document.getElementById('lng' + unique).value = place.geometry.location.lng().toFixed(6);
}

Answer 2

Thank's, I've gotten it to work but it happens on both the locality and locality2 fields . I'll try and sort it out from there.
if (addressType === 'locality') {
// Perform your custom search on this locality and populate the result in text field rehabGroup
let locality2 = place.address_components[i]['long_name'];
//Carry out a GET Ajax request using JQuery
$.ajax({
//The URL of the PHP file that searches MySQL.
type: 'GET',
url: 'ajax.php',
data: {
locality2: locality2
},
success: function(data){
let obj = data;
alert(cut);
document.getElementById('rehabGroup').value = cut;
}
});
}