Published on: 11 December, 2013

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

Posted by andy | 27663 views 4 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.