How to create a Google Address Autocomplete search box with additional hidden fields (longitude, latitude)?

Question

Hoping someone can help.

I'm currently building a website that stores some venues (locations) information for use within the application.

What i want to achieve is, an input in a modal window where a User supplies 2 things:

1. Venue name (can be named whatever the user wants - this is easy).
2. A Google Address Autocomplete box where a user starts typing the address and results automatically get populated - this is the part i need help with.
3. The entire address needs to be a single input as I store this as a large string (I don't need it broken down into street, address, post/zip code, etc.)
4. I also need, from the automatically created address, to get the longitude and latitude of the address populated and apply those to the hidden fields.

Ideally I'd like to force the user to submit the form by selecting an option from the Google Addresses rather than manually inputting something. But this isn't crazy essential, more of a nice-to-have.

Here is my form inputs:

 <form method="POST" action="{{ route('manage.venue.create', $url_extension) }}"> @csrf <div class="form-group"> <label for="amount">Venue Name</label> <input id="name" type="text" class="form-control" name="name" autofocus placeholder="Enter Venue Name"> </div> <div class="form-group"> <label for="amount">Address</label> <input id="address" type="text" class="form-control" name="address" autofocus placeholder="Enter Location Name"> <input type="hidden" name="latitude" id="latitude" value="0" /> <input type="hidden" name="longitude" id="longitude" value="0" /> </div> <br> <button type="submit" class="btn btn-primary">Save</button> </form>

I'm aware that all of the magic needs to happen in Javascript and I found a lot of useful resources online about creating these autocomplete boxes however none of them really cater to what I need. Also, all the examples I saw vary from different versions of the Google API and some are quite old. Also all of them tend to have a big Google Map with a drop down pin as well which I don't need.

I already have a GCP project created with an API key and all the necessary API's enabled.

I would highly appreciate any help on this, thank you.

Answer 1

Resolved: http://jsfiddle.net/upsidown/GVdK6/

function initialize() {

var ac = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
  types: ['geocode']
});

ac.addListener('place_changed', function() {

var place = ac.getPlace();

if (!place.geometry) {
  // User entered the name of a Place that was not suggested and
  // pressed the Enter key, or the Place Details request failed.
  window.alert("No details available for input: '" + place.name + 
 "'");
  return;
}

var html = '<div>Latitude: ' + place.geometry.location.lat() + 
'</div>';
html += '<div>Longitude: ' + place.geometry.location.lng() + 
'</div>'; 

  document.getElementById('geometry').innerHTML = html;
  });
  }

initialize();

Thanks for your help.