Google Maps - Getting Started

Advertisements

Previous Page
Next Page  

What are Google Maps?

Google Maps is a free web mapping service by Google that provides various types of geographical information. Using Google Maps, one can.

  • Search for places or get directions from one place to another.

  • View and navigate through horizontal and vertical panoramic street level images of various cities around the world.

  • Get specific information like traffic at a particular point.

Google Maps provides an API using which you can customize the maps and the information displayed on them. This chapter explains how to load a simple Google Map on your web page using HTML and JavaScript.

Steps to Load the Map on a Webpage

Follow the steps given below to load a map on your webpage −

Step 1 : Create an HTML Page

Create a basic HTML page with head and body tags as shown below −

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Step 2 : Load the API

Load or include the Google Maps API using the script tag as shown below −

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Step 3 : Create the Container

To hold the map, we have to create a container element, generally the <div> tag (a generic container) is used for this purpose. Create a container element and define its dimensions as shown below −

<div id = "sample" style = "width:900px; height:580px;"></div>

Step 4 : Map Options

Before initializing the map, we have to create a mapOptions object (it is created just like a literal) and set values for map initialization variables. A map has three main options, namely, centre, zoom, and maptypeid.

  • centre − Under this property, we have to specify the location where we want to centre the map. To pass the location, we have to create a LatLng object by passing the latitude and longitudes of the required location to the constructor.

  • zoom − Under this property, we have to specify the zoom level of the map.

  • maptypeid− Under this property, we have to specify the type of the map we want. Following are the types of maps provided by Google −

    • ROADMAP (normal, default 2D map)
    • SATELLITE (photographic map)
    • HYBRID (combination of two or more other types)
    • TERRAIN (map with mountains, rivers, etc.)

Within a function, say, loadMap(), create the mapOptions object and set the required values for center, zoom, and mapTypeId as shown below.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Step 5 : Create a Map Object

You can create a map by instantiating the JavaScript class called Map. While instantiating this class, you have to pass an HTML container to hold the map and the map options for the required map. Create a map object as shown below.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Step 6 : load the map

Finally load the map by calling the loadMap() method or by adding DOM listener.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Example

The following example shows how to load the roadmap of the city named Vishakhapatnam with a zoom value of 12.

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

It produces the following output −

Advertisements