Elaine Byene Elaine Byene - 11 months ago 74
jQuery Question

Two autocomplete fields via Google API

I have this two fields with

id="Pickup Location"
id="Drop Location"
. I want to auto-complete the fields with names of Indian cities.

<input type="text" value="" name="form[Pickup Location]" id="Pickup Location" onfocus="geolocate()" class="rsform-input-box">

<input type="text" value="" name="form[Drop Location]" id="Drop Location" onfocus="geolocate()" class="rsform-input-box">

And I have this Google API code that auto completes and it works perfectly. However, the JS is written for the input field to work with

So now, how do I re-write the JS so that it accepts both
Pick Location
Drop Location

PS: I don't need the
field and will be discarding it.

<input id="autocomplete" onFocus="geolocate()" type="text">

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

// 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">

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 to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{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();

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 fill 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
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADbpfJGWwRh5um_gd2gNySgrI5FAy2RZk&libraries=places&callback=initAutocomplete" async defer></script>

Answer Source

The code requires quite a few changes, and SO is not a code writing service, so I'll keep it basic.

The fillInAddress() function needs html elements to store values for both locations. Since those elements are not present I've removed that code.

The geolocate() function looks to be used only for plotting on a map, which is not present in your code, so I removed it.

So the following is for autocomplete only. You still need to figure out how to return only Indian cities via google maps API.

var placeSearch, pickupLocation, dropLocation;

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  pickupLocation = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('Pickup_Location')), {
      types: ['geocode']

  dropLocation = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('Drop_Location')), {
      types: ['geocode']

<input type="text" value="" name="form[Pickup Location]" id="Pickup_Location" placeholder="Pickup Location" class="rsform-input-box">

<input type="text" value="" name="form[Drop Location]" id="Drop_Location" placeholder="Drop Location" class="rsform-input-box">

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADbpfJGWwRh5um_gd2gNySgrI5FAy2RZk&libraries=places&callback=initAutocomplete" async defer></script>