Fetch Latitude & Longitude from Google Place Autocomplete and Directions script

Question

Does anyone know how to fetch latitude and longitude from within this google Place Autocomplete and Directions script?

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions

I'd like to pass the latitude and longitude value to a hidden field like below:

<input type="hidden" id="latitude" name="latitude"  />
<input type="hidden" id="longitude" name="longitude"  />

Answer 1

1. Remove the {placeIdOnly: true} from the AutocompleteOptions. With that set the place object only includes the name and placeId of the place.

2. get the latitude and longitude from the place object like this:

  document.getElementById("latitude").value= place.geometry.location.lat();
  document.getElementById("longitude").value= place.geometry.location.lng();

proof of concept fiddle

code snippet:

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });

  new AutocompleteDirectionsHandler(map);
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.travelMode = 'WALKING';
  var originInput = document.getElementById('origin-input');
  var destinationInput = document.getElementById('destination-input');
  var modeSelector = document.getElementById('mode-selector');
  this.directionsService = new google.maps.DirectionsService;
  this.directionsDisplay = new google.maps.DirectionsRenderer;
  this.directionsDisplay.setMap(map);

  var originAutocomplete = new google.maps.places.Autocomplete(
    originInput /*, {placeIdOnly: true} */ );
  var destinationAutocomplete = new google.maps.places.Autocomplete(
    destinationInput /*, {placeIdOnly: true} */ );

  this.setupClickListener('changemode-walking', 'WALKING');
  this.setupClickListener('changemode-transit', 'TRANSIT');
  this.setupClickListener('changemode-driving', 'DRIVING');

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
  var radioButton = document.getElementById(id);
  var me = this;
  radioButton.addEventListener('click', function() {
    me.travelMode = mode;
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.place_id) {
      window.alert("Please select an option from the dropdown list.");
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
      document.getElementById("orig_latitude").value = place.geometry.location.lat();
      document.getElementById("orig_longitude").value = place.geometry.location.lng();
    } else {
      me.destinationPlaceId = place.place_id;
      document.getElementById("dest_latitude").value = place.geometry.location.lat();
      document.getElementById("dest_longitude").value = place.geometry.location.lng();
    }
    me.route();
  });

};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }
  var me = this;

  this.directionsService.route({
    origin: {
      'placeId': this.originPlaceId
    },
    destination: {
      'placeId': this.destinationPlaceId
    },
    travelMode: this.travelMode
  }, function(response, status) {
    if (status === 'OK') {
      me.directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
};

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#origin-input,
#destination-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}
#origin-input:focus,
#destination-input:focus {
  border-color: #4d90fe;
}
#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}
#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

<input type="text" id="orig_latitude" name="orig_latitude" />
<input type="text" id="orig_longitude" name="orig_longitude" />
<br>
<input type="text" id="dest_latitude" name="dest_latitude" />
<input type="text" id="dest_longitude" name="dest_longitude" />

<input id="origin-input" class="controls" type="text" placeholder="Enter an origin location">

<input id="destination-input" class="controls" type="text" placeholder="Enter a destination location">

<div id="mode-selector" class="controls">
  <input type="radio" name="type" id="changemode-walking" checked="checked">
  <label for="changemode-walking">Walking</label>

  <input type="radio" name="type" id="changemode-transit">
  <label for="changemode-transit">Transit</label>

  <input type="radio" name="type" id="changemode-driving">
  <label for="changemode-driving">Driving</label>
</div>

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>