Click on Google Maps API and get the address

Question

The following code allows to get the coordinates, on click. But how to get the address or city name or region name or country on click on the map, with Google Maps API?

var myLatlng = new google.maps.LatLng(41.38,2.18);
var myOptions = { zoom: 13, center: myLatlng}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

google.maps.event.addListener(map, 'click', function(event) {alert(event.latLng);});

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>

Pass the `event.latLng` trough the geocoder could be an option. — putvande, Apr 27 '16 at 14:43
Possible duplicate of [How to get address location from latitude and longitude in Google Map.?](http://stackoverflow.com/questions/19511597/how-to-get-address-location-from-latitude-and-longitude-in-google-map) — Gokhan Kurt, Apr 27 '16 at 14:51

score 37 · Accepted Answer · answered Apr 27 '16 at 14:49

37

You can pass the event.latLng trough the Geocoder to get the address:

var myLatlng = new google.maps.LatLng(41.38, 2.18);
var myOptions = {
  zoom: 13,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event) {
  geocoder.geocode({
    'latLng': event.latLng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        alert(results[0].formatted_address);
      }
    }
  });
});

Fiddle

answered Apr 27 '16 at 14:49

putvande

15,068
3
34
50

Thanks @putvande ! Would you know how to automatically display, in a
the city name of the *center of the map*, each time we change position in the map (ie pan/zoom) ?
– Basj Apr 27 '16 at 15:02
Sorry, I don't know how to do that of the top of my head. Might be worth searching SO as there might be an answer to it. – putvande Apr 27 '16 at 15:05
you could use infowindow, then put
inside ,have a look my answer
– Ma Yubo Apr 27 '16 at 15:09

Ma Yubo · Answer 2 · 2016-04-27T15:34:08.940

you cannot get only one result by only lat,lng from google api, but you could get some results by search lat,lng and a keyword in a radius.

the only way get specific place information you need search by its placeID

    var myLatlng = new google.maps.LatLng(41.38,2.18);
var myOptions = { zoom: 13, center: myLatlng}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var infoWindow;
var service;
google.maps.event.addListener(map, 'click', function(event) {
    service = new google.maps.places.PlacesService(map);
    infoWindow = new google.maps.InfoWindow();
    var request = {
        location: event.latLng,
        keyword: 'food',
        radius:500
    };
    service.radarSearch(request, callback);

});
function callback(results, status) {
    if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
    }
    for (var i = 0, result; result = results[i]; i++) {
        addMarker(result);
    }
}

function addMarker(place) {
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: {
            url: 'http://maps.gstatic.com/mapfiles/circle.png',
            anchor: new google.maps.Point(10, 10),
            scaledSize: new google.maps.Size(10, 17)
        }
    });

    google.maps.event.addListener(marker, 'click', function() {
        service.getDetails(place, function(result, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                console.error(status);
                return;
            }
            infoWindow.setContent(result.name+"<br>"+result.formatted_address+"<br>"+result.formatted_phone_number);
            infoWindow.open(map, marker);
        });
    });
}

https://jsfiddle.net/3qeop8ud/2/

becareful about results the parameter in callback function, it might contain a lot results. in the last part, you could use single result find more information https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlaceResult — Ma Yubo, Apr 27 '16 at 15:16
@MaYubo can you post a live demo for future reference (jsfiddle or widget here) ? — Basj, Apr 27 '16 at 15:29

score -2 · Answer 3 · answered May 05 '21 at 03:32

 m is event =====>
 code here
 const latlng = {
lat: parseFloat(e.lat),
lng: parseFloat(e.lng),};

m.view.google.maps.Geocoder.prototype.geocode({ location: latlng },
function(results, status) {
if (status =='OK') {
  if (results[1]) {
    alert(results[1].formatted_address);
  }
}});

Click on Google Maps API and get the address

3 Answers3

Linked