CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markersreverse-geocodinggoogle-geocoding-api
Taimoor Imran
Taimoor Imran

Reputation: 43

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

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 i.e 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
}

Upvotes: 0

Views: 1038

Answers (2)

geocodezip
geocodezip

Reputation: 161334

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)
  1. 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>

Upvotes: 1

Ajay Korat
Ajay Korat

Reputation: 701

simply try to pass your lat and long to the following query string, and you will get a json array, fetch your placename from there.

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

Upvotes: 0

Related Questions