Google Maps JavaScript API V3 - Geocoder API is not returning place name

Question

Here is my code, i'm new to Google Maps and JavaScript, i'm trying to get the 'Place Name' by passing location (latlng) to the geocoder, but it's not returning any values. If is set the placeName var to 'somePlace' it set the title to 'somePlace'. but i want to set title with the return value ie place name.

function setMap(position){
  //var Karachi = {lat: 24.8978176, lng: 66.9596003}; //default city
  var location = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  }

  var mapOptions = {

      center: location,
      zoom: 13,         //initial zoom level
      mapTypeId: 'hybrid'  //map type
  }
  //object of map
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var placeName;
  //placeName = 'SomePlace'; 
  var newLatLng = location + '';
  var latlngStr = newLatLng.split(',',2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng:    parseFloat(latlngStr[1])};
  var geocoder = new google.maps.Geocoder({'location': latlng}, function(results, status) {
    if(status === 'OK'){
      if(results[1]){
        placeName = 'results[1].formatted_address';
      }
      else{
        window.alert('Error in ' + status);
      }
    }
    else{
      window.alert('Geocoder failed due to ' + status);
    }
  });

  var markerOptions = {
    position: location,
    map: map,
    title: placeName //<-- i want place name to be here

  }
  //object of marker
  var marker = new google.maps.Marker(markerOptions);
  marker.setTitle(placeName); //<-- this is also not working
}

Answer 1

You have syntax errors in your code.

1. you need to call the google.maps.Geocoder geocode method, with a valid GeocoderRequest object:

var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    location: location
  }, function(results, status) 

2. the Geocoder is asynchronous, you need to use the returned result in the callback function when/where it is available:

  if (results[1]) {
    placeName = results[1].formatted_address;
    var markerOptions = {
        position: location,
        map: map,
        title: placeName //<-- i want place name to be here

      }
      //object of marker
    var marker = new google.maps.Marker(markerOptions);

proof of concept fiddle

code snippet:

 function setMap(position) { var location = { lat: position.coords.latitude, lng: position.coords.longitude } var mapOptions = { center: location, zoom: 13, //initial zoom level mapTypeId: 'hybrid' //map type } //object of map var map = new google.maps.Map(document.getElementById('map'), mapOptions); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ location: location }, function(results, status) { if (status === 'OK') { if (results[1]) { placeName = results[1].formatted_address; var markerOptions = { position: location, map: map, title: placeName // set formatted_address as title of marker } //object of marker var marker = new google.maps.Marker(markerOptions); } else { window.alert('Error in ' + status); } } else { window.alert('Geocoder failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", function() { setMap({ coords: { latitude: 37.4419, longitude: -122.1419 } }) }); 

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> 

Answer 2

只需尝试将lat和long传递给以下查询字符串，您将获得一个json数组，从那里获取您的地名。

http://maps.googleapis.com/maps/api/geocode/json?latlng=44.4647452,7.3553838&sensor=true