Fetch latitude and longitude from google map

I have an embedded Google map in my website which has a ‘Place Autocomplete widget’ which we use to get a place ID, name etc. when searching.

I also need to get the latitude and longitude of a marked place.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 11.0168,
      lng: 76.9558
    },
    zoom: 13,
  });

  const input = document.getElementById("pac-input");

  const autocomplete = new google.maps.places.Autocomplete(input, {
    fields: ["place_id", "geometry", "name", "formatted_address"],
  });

  autocomplete.bindTo("bounds", map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const geocoder = new google.maps.Geocoder();
  const marker = new google.maps.Marker({
    map: map
  });

  marker.addListener("click", () => {
    infowindow.open(map, marker);
  });
  autocomplete.addListener("place_changed", () => {
    infowindow.close();

    const place = autocomplete.getPlace();

    if (!place.place_id) {
      return;
    }

    geocoder.geocode({
      placeId: place.place_id
    }).then(({ results }) => {
      map.setZoom(11);
      map.setCenter(results[0].geometry.location);
      // Set the position of the marker using the place ID and location.
      // @ts-ignore TODO This should be in @typings/googlemaps.
      marker.setPlace({
        placeId: place.place_id,
        location: results[0].geometry.location,
      });
      marker.setVisible(true);
      infowindowContent.children["place-name"].textContent = place.name;
      infowindowContent.children["place-id"].textContent = place.place_id;
      infowindowContent.children["place-address"].textContent = results[0].formatted_address;
      infowindow.open(map, marker);
    }).catch((e) => window.alert("Geocoder failed due to: " + e));
  });
}

window.initMap = initMap;

Answer

You can retrieve the lat/lng from the geometry property in the Place model you retrieve:

const place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();

Advertisement

Answer