Return Latitude and Logitude to my form fields with Javascript - Google Maps

Question

My problem with latitude and longitude have been solved, now I’m having difficulties to return these values within my form, I’ll leave down the link to demo.

Link with the project

"I am using the following Google Maps script to return establishments, but in my Marketer besides the name of the site I would return, latitude and longitude."

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

  var input = /** @type {!HTMLInputElement} */ (document.getElementById('pac-input'));
  var types = document.getElementById('type-selector');

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);

    var place = autocomplete.getPlace();

    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }

    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';

    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  }); // Sets a listener on a radio button to change the filter type on Places // Autocomplete. function setupClickListener(id, types) {

  var radioButton = document.getElementById(id);

  radioButton.addEventListener('click', function() {
    autocomplete.setTypes(types);
  });
}

setupClickListener('changetype-establishment', ['establishment']);

Answer 1

Where you have the code:

var address = '';
if (place.address_components) {
address = [
  (place.address_components[0] && place.address_components[0].short_name || ''),
  (place.address_components[1] && place.address_components[1].short_name || ''),
  (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}

infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);

Change line to read infowindow

infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + place.geometry.location.lat() + ',' + place.geometry.location.lng());

Answer 2

I was able to solve by doing as follows, so I was able to rescue all the data for my form.

    var place = this.getPlace();

  $("body").find("#txtNome").val(place.name );
  $("body").find("#txtEndereco").val(place.formatted_address);
 $("body").find("#txtLatitude").val(place.geometry.location.lat());
 $("body").find("#txtLongitude").val(place.geometry.location.lng());
if (!place.geometry) {
  window.alert("Autocomplete's returned place contains no geometry");
  return;
}