Display location on google map from address using javascript google map api

by Posted on

In this tutorial, I am going to show you a little useful trick that is how to display any location on google map from address if you don’t have co-ordinates (latitude and longitude).

For doing this you can simply use google map javascript api, It is quite simple, fast and easy to use.

Most of the time many websites want to display location on google map but they don’t have co-ordinates to display location on map, so don’t worry using google map api you can get the co-ordinates from address.



Suppose you have the lot’s of company details in your database and you want to display location of each company on google map but you don’t have co-ordinates in your database, you just only have the address of the company then how you’ll proceed, I am going to tell you in this tutorial.

Ok Let’s come on the track

First include google map javascript api in your page.

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

Add below script to get co-ordinates from address and mark co-ordinates on google map

<script>
var geocoder = new google.maps.Geocoder(); // initialize google map object
var address = "D-3/2 Okhla phase 2 delhi india";
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();
var myCenter=new google.maps.LatLng(latitude,longitude);
       function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 
var map=new google.maps.Map(document.getElementById("map"),mapProp);
 
var marker=new google.maps.Marker({
  position:myCenter,
  });
 
marker.setMap(map);
}
 
google.maps.event.addDomListener(window, 'load', initialize); 
    } 
}); </script>

Create a map container where location on the map will be display.

<div id="map" style="width:100%;height:300px;"></div>

Now your final script will be..

 <div id="map" style="width:100%;height:300px;"></div>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var geocoder = new google.maps.Geocoder(); // initialize google map object
var address = "D-3/2 Okhla phase 2 delhi india";
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();
var myCenter=new google.maps.LatLng(latitude,longitude);
       function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 
var map=new google.maps.Map(document.getElementById("map"),mapProp);
 
var marker=new google.maps.Marker({
  position:myCenter,
  });
 
marker.setMap(map);
}
 
google.maps.event.addDomListener(window, 'load', initialize); 
    } 
}); </script>

This is the very basic example of the google map api, you can add more features on google map see api tutorial on https://developers.google.com/maps/documentation/javascript/

Hope this tutorial will help you to understand google map integration on your website.

Published by admin