get address after clicking in the map

12,763

Here's a simple example of retrieving the address. The results can get complicated (it is an array, from what I saw it's an arbitrary mix of cross streets, neighborhoods, state, and country. I didn't see a pattern)

I am only using the first line of results which is a combination of street, city, state, country. Read here the details:

https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingResults

A demo is here: http://jsfiddle.net/eB2RX/1/

I noticed the resolution is not very good, I mean, in the USA you get street numbers but not in Tunisia. I only saw Street names.

Part of the code:

  var map;
  var geocoder;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(36.835769, 10.247693 ),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        geocoder = new google.maps.Geocoder();
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });

        var marker;
        function placeMarker(location) {
            if(marker){ //on vérifie si le marqueur existe
                marker.setPosition(location); //on change sa position
            }else{
                marker = new google.maps.Marker({ //on créé le marqueur
                    position: location, 
                    map: map
                });
            }
            document.getElementById('lat').value=location.lat();
            document.getElementById('lng').value=location.lng();
            getAddress(location);
        }

  function getAddress(latLng) {
    geocoder.geocode( {'latLng': latLng},
      function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
          if(results[0]) {
            document.getElementById("address").value = results[0].formatted_address;
          }
          else {
            document.getElementById("address").value = "No results";
          }
        }
        else {
          document.getElementById("address").value = status;
        }
      });
    }
  }
Share:
12,763
Houx
Author by

Houx

Updated on June 09, 2022

Comments

  • Houx
    Houx almost 2 years

    I need to get address and coordinates after clicking on the map, I'm using google map api v3, i recuperated the coordinates in inputs but i need also arddress of the point.

     function initialize() {
                var myOptions = {
                    center: new google.maps.LatLng(36.835769, 10.247693 ),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                google.maps.event.addListener(map, 'click', function(event) {
                    placeMarker(event.latLng);
                });
    
                var marker;
                function placeMarker(location) {
                    if(marker){ //on vérifie si le marqueur existe
                        marker.setPosition(location); //on change sa position
                    }else{
                        marker = new google.maps.Marker({ //on créé le marqueur
                            position: location, 
                            map: map
                        });
                    }
                    latitude.value=location.lat();
                    longitude.value=location.lng();
                }
    
            }
    

    I used this php script to get the address but if don't know how to use it in javascript? Can i use javascript to get address?

    <?php
        $url      = 'http://where.yahooapis.com/geocode?location=40.714224,-73.961452&gflags=R&flags=J';
        $response = json_decode(file_get_contents($url));
        $location = $response->ResultSet->Results[0];
        foreach ((array) $location as $key => $value) {
                if($key == 'city')
                    $city = $value;
                if($key == 'country')
                    $country = $value;
                if($key == 'street')
                    $street = $value;
        }
        echo "Street: ".$street."<br>";
        echo "City: ".$city;
        echo "<br/>Country: ".$country;
    
        ?>