62

I'm using the following geocoding function to convert a textual address into latitude and longitude numbers, but it's not working right. The alert writes "undefined".

Can anyone say what's wrong?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var address = "new york";

geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.latitude;
    var longitude = results[0].geometry.location.longitude;
    alert(latitude);
    } 
}); 
</script>

4 Answers 4

94

Try using this instead:

var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();

It's bit hard to navigate Google's api but here is the relevant documentation.

One thing I had trouble finding was how to go in the other direction. From coordinates to an address. Here is the code I neded upp using. Please not that I also use jquery.

$.each(results[0].address_components, function(){
    $("#CreateDialog").find('input[name="'+ this.types+'"]').attr('value', this.long_name);
});

What I'm doing is to loop through all the returned address_components and test if their types match any input element names I have in a form. And if they do I set the value of the element to the address_components value.
If you're only interrested in the whole formated address then you can follow Google's example

3
54

You're accessing the latitude and longitude incorrectly.

Try

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var address = "new york";

geocoder.geocode( { 'address': address}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    alert(latitude);
  } 
}); 
</script>
3
  • @Damcrumb , can you help me about this question? stackoverflow.com/questions/17587352/… Jul 11, 2013 at 10:33
  • 2
    This is great code, but I've another question, what if I would need those values in the exectuion of my Javascript, and not only inside the parameter function inside the geocode call? Thanks
    – axel
    Sep 9, 2015 at 13:43
  • The above code is missing the required API key and will not work Jun 21, 2017 at 15:30
5

The script tag to the api has changed recently. Use something like this to query the Geocoding API and get the JSON object back

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/geocode/json?address=THE_ADDRESS_YOU_WANT_TO_GEOCODE&key=YOUR_API_KEY"></script>

The address could be something like

1600+Amphitheatre+Parkway,+Mountain+View,+CA (URI Encoded; you should Google it. Very useful)

or simply

1600 Amphitheatre Parkway, Mountain View, CA

By entering this address https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY inside the browser, along with my API Key, I get back a JSON object which contains the Latitude & Longitude for the city of Moutain view, CA.

{"results" : [
  {
     "address_components" : [
        {
           "long_name" : "1600",
           "short_name" : "1600",
           "types" : [ "street_number" ]
        },
        {
           "long_name" : "Amphitheatre Parkway",
           "short_name" : "Amphitheatre Pkwy",
           "types" : [ "route" ]
        },
        {
           "long_name" : "Mountain View",
           "short_name" : "Mountain View",
           "types" : [ "locality", "political" ]
        },
        {
           "long_name" : "Santa Clara County",
           "short_name" : "Santa Clara County",
           "types" : [ "administrative_area_level_2", "political" ]
        },
        {
           "long_name" : "California",
           "short_name" : "CA",
           "types" : [ "administrative_area_level_1", "political" ]
        },
        {
           "long_name" : "United States",
           "short_name" : "US",
           "types" : [ "country", "political" ]
        },
        {
           "long_name" : "94043",
           "short_name" : "94043",
           "types" : [ "postal_code" ]
        }
     ],
     "formatted_address" : "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
     "geometry" : {
        "location" : {
           "lat" : 37.4222556,
           "lng" : -122.0838589
        },
        "location_type" : "ROOFTOP",
        "viewport" : {
           "northeast" : {
              "lat" : 37.4236045802915,
              "lng" : -122.0825099197085
           },
           "southwest" : {
              "lat" : 37.4209066197085,
              "lng" : -122.0852078802915
           }
        }
     },
     "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
     "types" : [ "street_address" ]
  }],"status" : "OK"}

Web Frameworks such like AngularJS allow us to perform these queries with ease.

3
  • How do you restrict YOUR_API_KEY to your site when doing XHR requests? We are facing the problem that we can't restrict our key to the appropriate referer, the API answers with something like "geocode api should use a server-key". Obviously we can implement this on the server-side and just proxy the request, but that seems just weird. Is there any way to geocode on the client side and restrict the api key?
    – Daniel G.
    Mar 14, 2017 at 14:03
  • 1
    The only solution I can think of at the top of my head would be to store the API_KEY on the server as a variable and access it via an AJAX call on the client. I don't know of another way... That's a very good question tho.
    – AllJs
    Mar 14, 2017 at 20:30
  • That wouldn't solve the problem though. 1. You would still make the XHR call with the server key (and it would be blocked by google if you restricted the key to the server's ip) 2. You would still make your server key publicly accessible, which you don't want to do. The correct way to implement XHR requests is to use the Javascript Library. developers.google.com/maps/documentation/geocoding/intro vs. developers.google.com/maps/documentation/javascript/geocoding So if you want to restrict YOUR_API_KEY to a referer you need to use the JS API.
    – Daniel G.
    Mar 17, 2017 at 16:46
0
searchLatAndLngByStreet(street) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': street }, (res, status) => {
      console.log(res, status)
      if (status == google.maps.GeocoderStatus.OK) {
        return {
          latitude: JSON.stringify(res[0].geometry.location.lat()),
          longitude: JSON.stringify(res[0].geometry.location.lng())
        }
      } 
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.