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

1

My problem with latitude and longitude has been solved, now I'm having trouble returning these values inside my form, I'll leave the demo link below.

Link to the project

"I'm using the following Google Maps script to return properties, but in my marker besides the place name I would like to 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']);
    
asked by anonymous 13.11.2015 / 20:25

2 answers

3

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 the line to read infowindow

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

I was able to solve this by doing the following so I was able to retrieve 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;
}
    
26.11.2015 / 14:26