How to add google maps address points using javasript

In this article I will guide you how to show an address location on the google maps. You might have seen lots of examples how websites show there address locations on the google maps. One perfect example would be on the contact us page displaying address location on a small box like below.

Sample google map address point

How to use Google Map API

To create a map like above you need to use a Map API. A very popular MAP API is google Map API. I will show you how to create a static html page displaying a google map showing your address location.

First create a static html page and set the google map api reference as given below;

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Google Map Address location display</title>
    <!--Set the google map api refernce---->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
</head>
<body>
   <h1>Google Maps Address location</h1>
</body>
</html>

Above code will give you following output in the web browser;

blank page

Now your web page ready to make google map api calls. First you need to declare a div to show the map canvas as follows;

<!--to show the result map location using google map api--->
<div id="mapcanvas" style="width:500px;height:500px;background-color:yellow;"></div>

once you make the google map api calls you will append your map result into this div. Refresh the page you will get a output like below;

Google map canvas div

Scripting Google Maps API using Javascript

now you can begin scripting the google map api calls. First you need to declare a google map api geocoder object. you can define it as follows;

//declare a google maps api geo coder
var geocoder = new google.maps.Geocoder();

next step is to call the geocoder() function as follows;

//calling the geocoder() 
geocoder.geocode( { address: youraddress}, function(results, status) {
}

In this function call, all you need to provide is your address. (ex:- “3/46, Hunter Street, Dubbo 2830 NSW”) Once method call is executed you will get an object array as results and the Status. You can use this array of objects to get the required geometrical location details such as longitude and latitude of your given address. If the method call is successful then you will receive status as google.maps.GeocoderStatus.OK. Now you have your address geometrical location. Now we can create a google map object using above details.

Create Google Maps map Object

Before creating the map object you need to collect the map option parameters. You need to pass the map options in order to create a map object. You can create a map option colletions as follows;

// create map option variables
 var mapOptions = { center: results[0].geometry.location, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };

The center parameter is the initial Map center. And it is a required parameter. Zoom is another parameter that is required under map options. It is the level of initial of zoom of the map. mapTypeId parameter will define the type of map that will going to display, initial setup will be ROAD MAP. You can find all the Google Map Api reference details here.

Now you are ready to create the map object. You can do it using following coding syntax.

//create map to draw address location
 map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);

Above code will uses google maps map() function to create a empty map. Map() function require two parameters. First one is the canvas element or the html element that is used to load the canvas object. In this function call we use the GetElementByID javascript function to get the div element in the page body where we want to load the result map. Second parameter is the map option what we build above. Once this map function call is successful you will get a map loaded into you target DIV container on the body. Now your web page code look as follows;

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Google Map Address location display</title>
 <!--Set the google map api refernce---->
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
 <script type="text/javascript">
var geocoder = new google.maps.Geocoder(); //create geocoder object
 // calling the geocode() function
 geocoder.geocode({ address: "3/46, Hunter Street, Dubbo 2830 NSW" }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 //map option parameters
 var mapOptions = { center: results[0].geometry.location, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
 //create map to draw address location
 map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
 } else {
 alert("Geocode was not successful for the following reason: " + status);
 }
 });
 </script>
</head>
<body>
 <h1>
 Google Maps Address location</h1>
 <!--to show the result map location using google map api--->
 <div id="mapcanvas" style="width: 500px; height: 500px; background-color: yellow;">
 </div>
</body>
</html>

Save and refresh the page you will get an output like below;

Map canvas loaded in to the body div

Define Google Maps Address point

Above map show the correct location but not the correct address point. Now you need to modify your javascript and to show the exact map point on the google map. You need to add the following code after creating the google map in the javascript.

// create the map point
var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });

Above code snippet uses the google map marker() function to make a map point on the google map. To create a map address point you need pass two parameters the maker() function. One is the active google map object and the other is the location which contain the longitude and latitude values. Now you map script would look as follows;

<script type="text/javascript">
var geocoder = new google.maps.Geocoder(); //create geocoder object
 // calling the geocode() function
 geocoder.geocode({ address: "3/46, Hunter Street, Dubbo 2830 NSW" }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 //map option parameters
 var mapOptions = { center: results[0].geometry.location, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
 //create map to draw address location
 map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
 // create the map point
 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });
 } else {
 alert("Geocode was not successful for the following reason: " + status);
 }
 });
 </script>

Save your web page and refresh the page, you will get following output;

Google map with the address point

As you can see in the above map result there is a red map point showing the exact location of your address passed in to the code.

You can see the live demo here