Published on: 11 December, 2013

How to get address location from latitude and longitude in Google Map

Posted by andy | 15183 views 3 likes 2 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, we will show you how you can using Google Map API to display the Google Map. There will be two examples given, one is using reverse geocoding latitude and longitude to get the address and the second example will use the street address to display the map.

Firstly you will need to import this javascript script api from google.

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

Here will be the html code, where you need to specify the google map object id and the width and height

<div id="map_canvas" style="height:500px;width:600px;"></div>

This is will be the javascript, you can include them in a javascript file if you prefer.

/* private variables */
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

/* function to initialize the map */
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

/* Geocoding based on address */
function codeAddress(address, title, imageURL) {
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({map: map,position: results[0].geometry.location,icon: imageURL,title: title});
			
            /* Set onclick popup */
			var infowindow = new google.maps.InfoWindow({content: title});
			google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

/* Geocoding based on latitude and longitude */
function codeLatLng(latlng, title, imageURL) {
    var latlngStr = latlng.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                map.setZoom(11);
                marker = new google.maps.Marker({position: latlng,map: map,icon: imageURL,title: title,content: title});
				
                /* Set onclick popup */
            	var infowindow = new google.maps.InfoWindow({content: title});
				google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);});
				
            } else {
                alert('No results found');
            }
        } else {
            alert('Geocoder failed due to: ' + status);
        }
    });
}

The following script is needed to initiate loading the google map. Note: this script need to be placed after the div id="map_canvas".

/* set  iconpath and the initiate the google map */
var iconPath = "";
initialize();

/* Geocoding based on address */
codeAddress('Sydney NSW', 'Sydney NSW', iconPath + "icon1.png");
codeAddress('Homebush NSW', 'Homebush NSW', iconPath + "icon2.png");
codeAddress('Randwick NSW', 'Randwick NSW', iconPath + "icon3.png");
codeAddress('Paramatta NSW', 'Paramatta NSW', iconPath + "icon4.png");
codeAddress('Belavista NSW', 'Belavista NSW', iconPath + "icon5.png");

/* Geocoding based on latitude and longitude */
codeLatLng('-33.971750, 150.894251', 'Glenfield NSW', iconPath + "icon2.png");
codeLatLng('-33.775820, 151.119428', 'Macquarie Park NSW', iconPath + "icon3.png");
codeLatLng('-33.830862, 151.087534', 'Rhodes NSW', iconPath + "icon4.png");
codeLatLng('-33.951013, 151.082372', 'Beverly Hills NSW', iconPath + "icon5.png");
It is recommended that you populate using latitude and longitude as there is a limitation on populate the map by using geocoding address.

See the Demo

Here is the quick demo on how it is going to look. We only use 1 geocoding by address and 5 geocoding by latitude and longitude samples due to query limitation by Google

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 June, 2016
Google Analytics is one of the best free analytics site tracker. It gives you an idea the statistic of your visitors like the country they come from, the URL or keyword they search to go to your site or even the demographic or ages of your visitors. If you are a developer, you definitely do not want to track any data when you are in development phase. In this tutorial, you will learn how to disable google analytics for local development by using a javascript code if condition.
Published on: 13 May, 2016
To convert a number value into money format in Javascript can be done easily using Javascript. Firstly you will need to use the built in toFixed function that will return a number value into two decimal point and then using a regular expression to reformat the value.
Published on: 16 March, 2016
If you try to search this particular topic in Google Search, you will come up with a list of different solutions. Most of them will use the document or body height to compare if there is a difference, we assume there will be a scroll bar. Unfortunately it doesn't work well, most of them it will return the same height.
Related Tutorials