Google Maps - Getting Started

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.
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.
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.
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.
Follow the steps given below to load a map on your webpage −
Create a basic HTML page with head and body tags as shown below −
<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>
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>
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>
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.
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.
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.)


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
   };
}
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);

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()">
The following example shows how to load the roadmap of the city named Vishakhapatnam with a zoom value of 12.
<!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 −

    20 Lectures 
     2.5 hours 

 Asif Hussain

    7 Lectures 
     1 hours 

 Aditya Kulkarni

    33 Lectures 
     2.5 hours 

 Sasha Miller

    22 Lectures 
     1.5 hours 

 Zach Miller

    16 Lectures 
     1.5 hours 

 Sasha Miller

    23 Lectures 
     2.5 hours 

 Sasha Miller
 Print
 Add Notes
 Bookmark this page