Adding Google Maps to your website

By | May 27, 2013


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


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 and login with your Google/Gmail account

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

Step 3:
Scroll down in the services list and activate “Google Maps API V3” service

Step 4:

Click on “API Access” menu open “API Access” page and note down your “API key” from the “Simple API Access” section

Adding Google Map to a site

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

<html xmlns="">
<head runat="server">
    <title>Google Maps</title>

    <script type="text/javascript" 

    <script type="text/javascript">
        function initialize(){
            var mapOptions={
                center:new google.maps.LatLng(28.3213, 77.5435),
            var map=new google.maps.Map(document.getElementById("myMap"), 

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

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.


0 thoughts 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 *