Google Maps Tutorial


Google Maps Tutorial

Google Maps is a free web mapping service by Google that provides various types of geographical information. Google Maps has a JavaScript API to customize the maps and display them on your webpage. This tutorial is about Google Maps API (Application Programming Interface). It explains how you can integrate Google Maps on your webpage.

Audience

This tutorial is meant for all those readers who would like to learn about Google Maps API. After completing this tutorial, you would be able to integrate Google Maps JavaScript API on your webpage.

Prerequisites

Before proceeding with this tutorial, you should be familiar with JavaScript and the concepts of object-oriented programming. You should also be familiar with Google Maps from a user's point of view.

Execute Google Maps Online

For most of the examples given in this tutorial, you will find a Try it option, so just make use of this option to execute your Google Maps programs on the spot and enjoy your learning. Try the following example using the Try it option available at the top-right corner of the following sample code box −

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(20.593684, 78.96288), zoom:12,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:570px; height:580px;"></div>
   </body>
   
</html>


Advertisements