Get location address from Latitude and Longitude on Google Maps

Question

I want that after clicking on the google map and getting Latitude and longitude, you can find a place with them and put it (address) in the input#searchTextField . What am I doing?

I tried but don't work for me:

DEMO: http://jsfiddle.net/DXkZJ/

 <input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;"> <div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div> $(function () { var lat = 44.88623409320778, lng = -87.86480712897173, latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; //zoomControl: true, //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function (event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); alert(place.name); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); alert(event.latLng.place.name) }); $("#searchTextField").focusin(function () { $(document).keypress(function (e) { if (e.which == 13) { return false; infowindow.close(); var firstResult = $(".pac-container .pac-item:first").text(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "address": firstResult }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("input").val(firstResult); alert(firstResult) } }); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } });​ 

Answer 1

So, firstly, you need reverse geocoding, not regular geocoding, because you are switching from latitude / longitude to an address, and not vice versa (see link ). Secondly, your listener would never do anything because it almost immediately declares return false ; in this case, you probably want event.stopPropogation() . In addition, google maps will intercept mouse clicks deeper in the DOM tree than document , so the event will never be listened so much.

So, I did this in order to change the geocode to the reverse geocode, as well as move the code to the document listener in the google receiver. If you want to keep the behavior of the listener added to focus, you can simply create a new listener on the map object. Here is a working jsfiddle demonstrating these changes , hope this helps.

Answer 2

Take a look at the gmap api developers. for the topic Reverse geocoding (address search) . You will get an answer.

Answer 3

Just add this code after moveMarker () function

 $("#map_canvas").click(function() { $("#searchTextField").val($(".MapLat").val() +", "+$(".MapLon").val()); }); 

Hope this is what you need :)