Manolo Manolo - 24 days ago 11
Javascript Question

Google geocoder is returning different latitude and longitude from request values

I'm getting the location from a latitude and a longitude given:

getLocationFromCoords(lat, lng) {
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
geocoder.geocode({
'latLng': latLng
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (typeof results[0].geometry.location != 'undefined') {

console.log(lat, lng);
console.log(results[0].geometry.location.lat(), results[0].geometry.location.lng());

// set the location
} else {
//...
}
});
});
}


The problem is that the latitude and longitude from
results[0].geometry.location
differ from the values of the request. The above code displays in the console:


38.9067339 1.4205983

38.9069681 1.4205133000000387


So am I missing anything? Why aren't the same values?

Answer

Geocoding or Reverse Geocoding can not give exact result. If you Geocode Address to LatLong you will get most appropriate and nearest record from Google. That is normal behaviour. Also Google's official example have same behaviour. (not error or problem).

Check this fiddle;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(
        	results[1].formatted_address + "<br />" + results[1].geometry.location
        );
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}
<div id="floating-panel">
  <input id="latlng" type="text" value="40.714224,-73.961452">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

Comments