Google Maps API - SPLessons

Chapter 2

Google Maps Basic Concept

Google Maps Basic Concept

The chapter demonstrates about Google Maps JavaScript API Basic Concepts and following are the concepts covered.

  • Getting An API Key.
  • Creating A Simple Map.

Getting an API key

The API key is a collection of unique numbers and letters which identifies the user to Google as the author of their Maps API applications.

In previous API version 3, an API key was mandatory for developing a map application but now it’s optional.

Google recommends having one API key, for making user to monitor the application usage easily and to contact the user if the free usage quota exceeds.

The steps below explains simple way to get an API key.

In order to get an API key, visit the Google developer’s console. Click the link below for API key.

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

Login with Google account and create or select a project. Under API manager, it automatically creates a page with options overview and credentials.

Some of the popular Google APIs are displayed under option overview. Click the Google Maps JavaScript API from the Google Maps APIs. i.e.

API manager -> Overview -> Google Maps APIs -> Google Maps JavaScript API

The below image show the popular Google Maps APIs under API manager.

Enable Google Maps JavaScript API by clicking the button Enable API provided at the top of the JavaScript API, the image below shows the Enable Button.

After Enabling the API, it automatically generate a button called GO to Credentials as shown in the below image.

On the Credentials page, obtain a Browser Key by setting the API Credentials in the options provided and then click Done button which will automatically generates a API key.

Now use the generated API key in the code for developing a mapping application, secure the API key and do not embed the API keys directly in the code exposing to public.

Creating a Simple Map

To create a Basic Google Map follow the procedure below.

Load Google API

Load Google Maps API using JavaScript tag as shown below.

<script src=<a href="http://maps.googleapis.com/maps/api/js">http://maps.googleapis.com/maps/api/js</a>></script>

Creating Map Container

<div> tag used to create Map Container as shown below.

<div id=”googleMap” style=”width:600px;height:480px:”></div>

Setting Map Properties

Center, MapTypeId, Zoom are the main options to be set before initializing.

Center – Center used to display the center of the map, which depends on the given LatLng object.
Pass the latitude and longitudes to the constructor of the required location.

MapTypeId – Google Maps API contains four types of Maps they are.

Zoom – Used to set the zoom level of a map.

function  initialize() {
var mapProp = {
center: new google.maps.LatLng( 17.3700, 78.4800 ),
zoom: 8
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Creating Map Object

The below code create a Map Object with the Id “googleMap”, by passing the parameters (mapProp).

Var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);

Adding Event Listener

Adding the DOM listener will execute the initialize () function on loaded window.

Google.maps.event.addDomListener(window, ‘load’ , initialize);

The example below shows the map of Hyderabad city as center with zoom value 10.

<!DOCTYPE html>
<html>
   <head>
      <script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=loadMap" async defer></script>
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
      <body>
<div id = "sample" style = "width:1200px; height:1000px;"></div>
	  <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.3700, 78.4800), 
               zoom:10, 
               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>  

Summary

  • Recommended at least one API key for monitoring applications easily and to know the free usage limits.
  • Do not embed the API key directly into the code, which exposed to public.

  • Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
  • Set the required Map Properties for better output.
  • Make sure the latitude and longitudes of the required location mentioned to be correct.