Adding Google Maps to your website

Introduction

In this article I will explain how to integrate Google Maps to your website

Description

In this article we will use Google Maps JavaScript API v3 to show Google Maps in our website. First we will see how to get an API key required for Google Maps. Then we will create a simple map with its center to a given Latitude/Longitude and Zoom level

Getting an API key

Step 1:

Go to https://code.google.com/apis/console and login with your Google/Gmail account

Step 2:
Click on the “Services” menu to open services

2013-05-25 11_02_00-Google APIs Console
Step 3:
Scroll down in the services list and activate “Google Maps API V3” service

2013-05-25 10_59_35-Google APIs Console
Step 4:

Click on “API Access” menu open “API Access” page and note down your “API key” from the “Simple API Access” section
2013-05-25 11_11_53-Google APIs Console
Adding Google Map to a site

Create a new ASP.NET application or a simple HTML file and write following HTML

<html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
      <title>Google Maps</title>

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

      <script type="text/javascript">
         function initialize(){
            var mapOptions={
               center:new google.maps.LatLng(28.3213, 77.5435),
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("myMap"),
            mapOptions);
         }
      </script>
   </head>

   <body onload="initialize()">
      <form id="form1" runat="server">
         <div id="myMap" style="width: 500px; height: 400px;">
         </div>
      </form>
   </body>
</html>

In the above code, we have used two script sections. First section loads Maps API libraries. You need to set two parameters in the API url, key and sensor. Key takes your API key and sensor takes true/false value to indicate whether your application uses a sensor like GPS. Second section creates and displays the map. In the body section we added a div “myMap” to hold the map.

On body “onload” event, we call “initialize” function that first creates an object literal “mapOptions” with map’s properties like center, zoom and mapTypeId. Then a Map object is created that takes container div element and “mapOptions” object as parameter.

In “mapOptions” object, center is set to a LatLng object that takes latitude and longitude of a place as parameter where we want to center the map. zoom is used to set the zoom level of the map where 0 is the completely zoomed out. mapTypeId is used to specify type of map we want to display. It can be ROADMAP, SATELLITE, HYBRID or TERRAIN.

2013-05-26 23_31_59-Google Maps

References

https://developers.google.com/maps/documentation/javascript/tutorial

One thought on “Adding Google Maps to your website

  1. Pingback: How to add markers in Google Maps | DEEPAK SHARMA

Leave a Reply

Your email address will not be published. Required fields are marked *