CODEWITHSUNDEEP
javascriptjquerygoogle-maps
jennifer Jolie
jennifer Jolie

Reputation: 727

Get location address from Latitude and Longitude in google maps

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

Upvotes: 7

Views: 46696

Answers (3)

Darshit Gajjar
Darshit Gajjar

Reputation: 721

Just add this code after moveMarker() function

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

Hope, this is what you needed :)

Upvotes: 1

kieran
kieran

Reputation: 1537

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.

Upvotes: 8

mohan.gade
mohan.gade

Reputation: 1105

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

Upvotes: 1

Related Questions