“Given an address, how do I get its latitude and longitude?”
I had been finding the solution for this problem for a long time until I discovered the API from Google Maps, the Geocoding Service.
Geocoding
According to the definition given in the Geocoding Service, geocoding is the process of converting human-readable address into geographic coordinates, such as latitude and longitude. Sometimes, the results returned can also include other information like postal code and bounds.
To do a latitude-longitude lookup of a given address, I just need to pass the a GeocodeRequest object Geocoder.geocode method. For example, if I want to find out the latitude and longitude of Changi Airport, I just do the following in JavaScript.
https://maps.googleapis.com/maps/api/js?libraries=places var geocoder = new google.maps.Geocoder(); if (geocoder) { geocoder.geocode( { address: "Changi Airport" }, function (result, status) { if (status != google.maps.GeocoderStatus.OK) { alert(address + " not found!"); } else { var topPick = result[0]; // The first result returned var selectedLatitude = topPick.geometry.location.lat(); var selectedLongitude = topPick.geometry.location.lng(); alert("Latitude: " + selectedLatitude.toFixed(2)); alert("Longitude: " + selectedLongitude.toFixed(2)); } } ); } else { alert("Geocoder is not available."); }
The above method is recommended for dynamic geocoding which will response to user input in real time. However, if what is available is a list of valid addresses, the Google Geocoding API will be another tool that you can use, especially in server applications. The Geocoding API is what I tried out in the beginning too, as shown in the C# code below.
var googleURL = "http://maps.googleapis.com/maps/api/geocode/json?address=" +
Server.UrlEncode(address) + "&sensor=false";
using (var webClient = new System.Net.WebClient())
{
var json = webClient.DownloadString(googleURL);
dynamic dynObj = JsonConvert.DeserializeObject(json);
foreach (var data in dynObj.results)
{
var latitude = data.geometry.location.lat;
var longitude = data.geometry.location.lng;
...
}
}
The reason of using dynamic JSON object here is because the Geocoding API returns many information, as mentioned earlier, and what I need is basically just the latitude and longitude. So dynamic JSON parsing allows me to get the data without mapping the entire API to a C# data structure. You can read more about this on Rick Strahl’s post about Dynamic JSON Parsing with JSON.NET. He also uses it for Google Maps related API.
The reason that I don’t use the Geocoding API is because there are usage limits. For each day, we can only call the API 2,500 times and only 5 calls per second are allowed. This means that in order to use the API, we have to get the API Key from Google Developer Console first. Also, it is recommended for use in server applications. Thus I change to use the Geocoding Service.
Where to Get the Address?
This seems to be a weird question. The reason why I worry about this is because it’s very easy to have typos in user input. Sometimes, having a typo is an address can mean two different places, for example the two famous cities in Malaysia, Klang and Kluang. The one without “u” is located at Kuala Lumpur area while the one with “u” is near to Singapore.
So I use the Place Autocomplete from Google Maps JavaScript API to provide user a list of valid place name suggestions.
https://maps.googleapis.com/maps/api/js?libraries=places ... <input id="LocationName" name="LocationName" type="text" value=""> ... $(function () { var input = document.getElementById('LocationName'); var options = { types: ['address'], componentRestrictions: { country: 'tw' } }; autocomplete = new google.maps.places.Autocomplete(input, options); });
In the code above, I restricted the places which will be suggested by the Place Autocomplete to be only places in Taiwan (tw). Also, what I choose in my code above is “address”, which means the Place Autocomplete will only return me addresses. There are a few Place Types available.
The interesting thing is that even when I input simplified Chinese characters in the LocationName textbox, the Place Autocomplete is able to suggest me the correct addresses in Taiwan, which are displayed in traditional Chinese.
If I search Malaysia places (which are mostly named in Malay or English) with Chinese words, even though the Place Autocomplete will not show anything, the Geocoder is still able to return me accurate results for some popular cities.
I also notice that if I view the source of the web page, there will be an attribute called “autocomplete” in the LocationName textbox and its value is set to false. However, this should not be a problem for Place Autocomplete API to work. So don’t be frightened if you see that.
<input ... id="LocationName" name="LocationName" type="text" value="" autocomplete="off">
Putting Two Together
Isn’t it good if it can show the location of the address on Google Map after keying in the address in the textbox? Well, it’s simple to do so.
Remember the script to look for Changi Airport latitude and longitude above? I just put the code in a function called showLatLngOfAddress which accepts a parameter as address. Then call it when the LocationName loses focus.
$('#LocationName').blur(function () {
showLatLngOfAddress(input.value);
});
In addition, I add a few more lines of code to showLatLng to draw a marker on the Google Map to point out the location of the given address on a map.
var marker = null;
function showLatLngOfAddress(address) {
...
var topPick = result[0];
...
//center the map over the result
map.setCenter(topPick.geometry.location);
//remove existing marker (if any)
if (marker != null)
{
marker.setMap(null);
}
//place a marker at the location
marker = new google.maps.Marker(
{
map: map,
position: topPick.geometry.location,
animation: google.maps.Animation.DROP,
draggable: true
});
}
Finally, I not only make the marker to be draggable, but also enable it to update the latitude and longitude of the address when it is dragged to another location on the map.
google.maps.event.addListener(marker, 'drag', function (event) {
alert('New Latitude: ' + event.latLng.lat().toFixed(2));
alert('New Longitude: ' + event.latLng.lng().toFixed(2));
});
Bing Maps
If you are interested in using Bing Maps, there are Bing Maps REST Services available too.
I tried to search “Kluang” using Bing Maps API, it returned me two locations. One was in Malaysia and another one was near to Palembang in Indonesia! Wow, cool! On the other hand, Google Places returned me only the Kluang in Malaysia.
Unlike Place Autocomplete from Google, it is not straightforward to do place name suggestion using Bing Maps. If you are interested, please read a tutorial written by Vivien Chevallier on how to use the Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically. I haven’t tried it out though. Anyway, Google APIs are still easier to use. =P
Summer 2015 Self-Learning Project
This article is part of my Self-Learning in this summer. To read the other topics in this project, please click here to visit the project overview page.
cuteprogramming 