Develop Reference

How to reverse geocode with maps?

I am using leaflet to display markers on a map, when I click on a marker, I get its lat and lng, then I am sending these to google maps geocoder to retrieve the address name:
var markerCoords = [];
circle.on('click', function (e) {
var curPos = e.target.getLatLng();
markerCoords.push(curPos.lng);
markerCoords.push(curPos.lat);
geocodeLatLng();
});
var geocoder = new google.maps.Geocoder;
function geocodeLatLng(geocoder) {
var latlng = {lat: parseFloat(markerCoords[1]), lng: parseFloat(markerCoords[0])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results[0].formatted_address);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
But it gives me:
Cannot read property 'geocode' of undefined
NOTE
This line is fine
var latlng = {lat: parseFloat(markerCoords[1]), lng: parseFloat(markerCoords[0])};
As if I do console.log I get the correct lat and lng

You have a typo in your code. You aren't passing the reference to the geocoder into the geocodeLatLng function, so it is null inside the function:
var markerCoords = [];
circle.on('click', function (e) {
var curPos = e.target.getLatLng();
markerCoords.push(curPos.lng);
markerCoords.push(curPos.lat);
geocodeLatLng(geocoder); // <============================================== **here**
});
var geocoder = new google.maps.Geocoder;
function geocodeLatLng(geocoder) {
var latlng = {lat: parseFloat(markerCoords[1]), lng: parseFloat(markerCoords[0])};
geocoder.geocode({'location': latlng}, function(results, status) {
// ... code to process the result
});
}

This is probably because google api hasn't loaded yet, you can try loading it before other scripts, to make sure, check console.log("google api object is", geocoder) and check Geocode to verify whether google has loaded before calling the api.
Edit : you don't need geocoder as parameter in geocodeLatLng function,as pointed out by #geocodezip, it will be undefined if you don't pass it. Since parameter will get priority over outer scope when variable names are same.
Following procedure will give you the address of user's current position, you can pass any lat, lng and get its address:-
//getting location address from latitude and longitude with google api
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var geocoder = new google.maps.Geocoder;
console.log("google api object is", geocoder)
var latlng = { lat: lat, lng: long };
geocoder.geocode({ 'location': latlng }, function (results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results[0].formatted_address);// this will be actual full address
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
function error(err) {
alert("Allow location services!");
}

Google maps - either lat and long or postcode

I have the following code to display markers on a google map based upon an array of locations, however I have a mix of postcodes and Lat/longs, I've used the geocoder to convert the postcodes to lat/longs but can't then use them when I try and set a marker.
Thanks for any help!
var geocoder;
var map;
var pos;
var geoLat;
var geoLong;
var markers = [];
var bounds = new google.maps.LatLngBounds();
var locations = [
[null, 'London Eye, London', 51.503454,-0.119562, 4]
,[null, 'Palace of Westminster, London', 51.499633,-0.124755]
,[null, 'The London Dungeon', 'SE1 7PB', , 2] //Value with Postcode
];
function isNumber(o) { return ! isNaN (o-0) && o !== null && o !== "" && o !== false; }
function init() {
geocoder = new google.maps.Geocoder();
var num_markers = locations.length;
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(locations[0][2], locations[0][3]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < num_markers; i++) {
if (isNumber (locations[i][2]) && isNumber (locations[i][3])){
geoLat = locations[i][2]
geoLng = locations[i][3]
alert(typeof(geoLat) +' '+typeof(geoLng)) //generates a correct number number response
}else{
geocoder.geocode( { 'address': locations[i][2]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
geoLat = results[0].geometry.location.lat()
geoLng = results[0].geometry.location.lng()
alert(typeof(geoLat) +' '+typeof(geoLng)) //generates a correct number number response
}
});
}
pos = new google.maps.LatLng(geoLat, geoLng); // Doesn't get value if a geocodes postcode added in
bounds.extend(pos);
map.fitBounds(bounds);
markers[i] = new google.maps.Marker({
position: pos,
map: map,
id: i,
title: locations[i][1]
});
}
}
google.maps.event.addDomListener(window, 'load', init);

The Geolocation request is an async call, which means that your script is running through while the API request isn´t finished yet.
Therefore you have two options.
Define the marker directly in the callback function
if (status == google.maps.GeocoderStatus.OK) { }
Or write sth. like a setMarker() function and call it in the callback.
function setMarker(lat, lng){}
In general it is a good practice to also make the Geocoding request a function, like:
doGeocode: function (address, postal_code, callback) {
console.log("TEST: " + address.toString());
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address,
'componentRestrictions': {
'postalCode': postal_code,
'country': 'de'
}
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
console.log(results);
callback(results);
} else {
//Error handling
alert('Geocode was not successful for the following reason: ' + status);
}
});
if you want to call it now just do
doGeocode (adress, postal_code, function (response){
//do your stuff
)};

how to get latitude and longitude for placeMarker in my map along with my address when im moving my marker to a specified place that i located

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
var _map;
var _originMarker, _destinationMarker;
var _geocoder;
function initialize()
{
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21.1289956,82.7791754)
};
_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
_geocoder = new google.maps.Geocoder();
_originMarker=createMarker('search-from');
_destinationMarker=createMarker('search-to');
google.maps.event.addListener(_map, 'click', function(mouseEvent)
{
if ((_activeMarker != null) && (!_activeMarker.getMap())) placeMarker(_activeMarker, mouseEvent.latLng);
});
}
function createMarker(_autoComplId)
{
var _autoCompl = document.getElementById(_autoComplId);
var _newmarker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
draggable: true,
map: null,
autoCompl: _autoCompl
});
google.maps.event.addListener(_newmarker, "dragend", function(event)
{
placeMarker(_newmarker, _newmarker.getPosition());
});
var _autocomplete = new google.maps.places.Autocomplete(_autoCompl);
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
var _place = _autocomplete.getPlace();
if (_place.geometry == null) return;
setCenterAndZoom(_place.geometry.location, 16);
placeMarker(_newmarker, _place.geometry.location);
});
return _newmarker;
}
function placeMarker(_marker, _location)
{
_marker.setPosition(_location);
RenewAddress(_marker);
}
function RenewAddress(_marker)
{
_geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (_marker.getMap() == null) _marker.setMap(_map);
_marker.autoCompl.value = results[0].formatted_address;
}
});
}
function setCenterAndZoom(_center, _zoom)
{
_map.setCenter(_center);
_map.setZoom(_zoom);
}
var _activeMarker = null;
function setActiveMarker(index)
{
switch(index)
{
case 0:
_activeMarker = _originMarker;
break;
case 1:
_activeMarker = _destinationMarker;
}
}
</script>
this is what im using to retrieve address,
and now i want to retrieve latitude and longitude along with my
address, in the above function RenewAddress(_marker)
iam using the _geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)
but iam unable to retrieve it i just got the result of the address
auto filled in the text box as an output but iam unable to retrieve
latitude and longitude

My version of RenewAddress() function is almost the same as your except that I retrieve lat/lng values before and show them in console.
function RenewAddress(_marker) {
console.log('RenewAddress');
var latlng = _marker.getPosition();
console.log(latlng.lat());
console.log(latlng.lng());
_geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log('status ok');
if (_marker.getMap() == null)
_marker.setMap(_map);
_marker.autoCompl.value = results[0].formatted_address;
console.log(results[0].formatted_address);
console.log(_marker.autoCompl.value);
var exactAddress = document.getElementById('search-to');
exactAddress.value = _marker.autoCompl.value + ', lat/lng: ' + latlng.lat() + ':' + latlng.lng();
} else {
console.log('error: ' + status);
}
});
}
See example at jsbin with only one marker and latitude and longitude fields. Write something to town/city/country field, for example Odisha. Select it. After that marker should be shown, exact address should be set and latitude and longitude fields. If you move marker around, information will be changed.

Maps Geocode in while loop doesn't evaluate correctly

I'm trying to use the Geocode API in a while loop and having no luck. It seems that my if statement inside my while loop is not evaluating until the end of the while loop. I am wondering if it is because of the Geocode API needs time to respond but I can't seem to get it to evaluate correctly. Here is my code:
while (posts != j)
{
var image = server + '/location_marker.png';
//var myLatLng = new google.maps.LatLng(locationLat[j],locationLong[j]);
var address = addressGlobal[j];
myLatLng = geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var myLatLng = new google.maps.LatLng(lat,lng);
alert(lat + lng);
return myLatLng;
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
alert(myLatLng);
place[j] = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
url: postURL[j],
title: postTitle[j]
});
google.maps.event.addListener(place[j], 'click', function() {
map.panTo(this.getPosition());
map.setZoom(7);
$("#fountainG").fadeIn(250);
history.pushState(null, this.title, this.url);
//offsetCenter(myLatLng,-400,0,map);
$(".dynamic").load(this.url + " .dynamic", function(response, status, xhr) {
$('.dynamic').fadeIn(500);
$('.dim').fadeIn(500);
$("#fountainG").fadeOut(250);
});
});
j++;
}

I think I've found the answer and it appears to be to do with closures. I'm not entirely sure how it fixed it, but I moved the geocoding functions into a nested function and then I call it within the while loop. Since it doesn't execute until the end, once it does, I need to loop through the arrays again and add them to a map. The code works successfully, but I don't really understand why, unfortunately.
I'd love if someone could chime in on why this works and perhaps a better way to set it up, but for the meantime this is fixed with:
function initialize() {
function geocode() {
var address = addressGlobal[j];
var k = 0;
myLatLng = geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
while (k != posts)
{
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var myLatLng = new google.maps.LatLng(lat,lng);
alert(lat + lng);
place[k] = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
url: postURL[k],
title: postTitle[k]
});
google.maps.event.addListener(place[k], 'click', function()
{
map.panTo(this.getPosition());
map.setZoom(7);
$("#fountainG").fadeIn(250);
history.pushState(null, this.title, this.url);
//offsetCenter(myLatLng,-400,0,map);
$(".dynamic").load(this.url + " .dynamic", function(response, status, xhr)
{
$('.dynamic').fadeIn(500);
$('.dim').fadeIn(500);
$("#fountainG").fadeOut(250);
});
});
k++;
}
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
var geocoder = new google.maps.Geocoder();
google.maps.visualRefresh = true;
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(37.09024,-95.712891),
disableDefaultUI: true,
};
var posts = locationLat.length;
var j = 0;
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var place = [];
while (posts != j)
{
var image = server + '/location_marker.png';
//var myLatLng = new google.maps.LatLng(locationLat[j],locationLong[j]);
geocode();
alert(myLatLng);
j++;
}
//Determine if the user came in via the front page or a post so we can set the viewport correctly
if ( entryPage == "post" )
{
map.setZoom(7);
var postView = new google.maps.LatLng(postLocationLat, postLocationLong);
map.panTo(postView);
}
}

Turn geolcation in city name code doesn't seem to work

I'm trying to get a geolocation and turn that into text. I got code to do that but it gives me an error. How can this error be solved?
The error: TypeError: 'undefined' is not an object (evaluating 'geocoder.geocode')
The code:
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'location':latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}

To Reverse Geocode, the request structure contains latLng, not location
From the example in the documentation slightly modified (not tested):
function codeLatLng(lat, lng) {
// remove irrelevant code
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
Also, this is not correct, if you are going to use the first result (result[0]), you should check whether that existst (if results[0] ... not if results[1]):
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
Looking at your jsfiddle, you are not loading the API correctly. Please see the documentation on the correct way(s) to load the API