I want after click on google map and getting Latitude and Longitude get location place from they and put it (address) in filed input#searchTextField. What do i do?

I tried as, but don't work for me:

DEMO: /

<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 = '.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);
     }
 });​

I want after click on google map and getting Latitude and Longitude get location place from they and put it (address) in filed input#searchTextField. What do i do?

I tried as, 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);
     }
 });​

• javascript
• jquery
• google-maps

3 Answers 3

Ok, so firstly you need reverse geocoding, not regular geocoding, because you are going from a latitude/longitude into an address rather than the other way around (see reference). Secondly your key listener would never do anything because it almost immediately states return false; in this case you probably want event.stopPropogation(). Furthermore google maps will intercept your mouse clicks at a greater depth in the DOM tree than document, so the event will never be listened that highly anyway.

So what I did was to change your geocode into a reverse geocode, as well as move the code in the document listener into the google listener. If you wanted to retain the behaviour of the listener being added on focus, you can simply create a new listener on the map object. Here is a working jsfiddle demonstrating these changes, hopefully this helps.

Take a look at the gmap developers api. for topic Reverse Geocoding (Address Lookup) . You will got your answer.

Just add this code after moveMarker() function

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

Hope, this is what you needed :)