Create Google Maps

How to Create Google Maps

Logo for any website or blog is a visual mark to identify your company product or service. Here we see about how to add logo on blog.

Steps to Create Google Maps.

Create an HTML Page
Load the Google API
Create a Map Container
Map Options
Create a Map Object
Add an Event Listener to Load the Map

Create an HTML Page

Create a basic HTML page include head and body tag as shown below:

Syntax

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

Load Google maps API

Load Google Maps API using the script tag as shown below:

Syntax

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

Create the Container

To hold the map we need to create container, generally we use div tag for this purpose as shown below:

Syntax

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

Map Option (Set Map Properties)

A map has three main options, namely, center, zoom, and maptypeid. Here we set map option.

Center: Specify the location where we want to center the map.
Zoom: Specify the zoom level of the map.
maptypeid: Specify the type of the map we want, Roadmap, Satellite etc.

Syntax

	
var mapProp = {
  center:new google.maps.LatLng(51.508742, -0.120850),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Create a Map Object

To create 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.

Syntax

	
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

Load the map

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

Syntax

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

Google Maps Example

Syntax

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

<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:600px;height:300px;"></div>
<br>

</body>
</html>