Google Maps API - SPLessons

Chapter 10

Google Maps Shapes

Google Maps Shapes

The chapter below demonstrates about the Google Maps API Shapes and following are the concepts covered.

  • Shapes
  • Polylines
  • Polygons
  • Rectangles
  • Circles
  • Editing and Dragging a shape

Shapes

Google Maps API provide some shapes which can be added to the map, so that the user can easily indicate a location on the map providing with some information. The LatLong co-ordinates are the major requirement for creating a shape on map.

Following are some of the default shapes provided by the Google Maps API.

Polylines

A line drawn on a map depending on a series of LatLng co-ordinates is known as polylines. Following are the properties supported by the Polyline in Google Map JavaScript API.

The example below demonstrate the code for creating a simple Polyline on a map.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// This example creates a 2-pixel-wide red polyline showing the roadway path.
//from jammu and kanyakumari in india.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 21.0000, lng: 78.0000},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: 34.0900, lng: 74.7900},
    {lat: 28.6139, lng: 77.2090},
    {lat: 27.1800, lng: 78.0200},
    {lat: 21.1500, lng: 79.0900},
	{lat: 17.3700, lng: 78.4800},
	{lat: 14.6800, lng: 77.6000},
	{lat: 12.9667, lng: 77.5667},
	{lat: 9.9000, lng: 78.1000},
	{lat: 8.0780, lng: 77.5410}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
  </body>

Polygons

Polygons are used to indicate or connect regions with in closed loop on a map. Similar to polylines, the polygons also use some series of LatLng co-ordinates.

Following are the properties supported by Polygons in Google Maps API.

The example below demonstrate the code for creating a Polygon between three different locations using LatLng co-ordinates.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon shape</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 21.0000, lng: 78.0000},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 17.3700, lng: 78.4800},
    {lat: 12.9667, lng: 77.5667},
    {lat: 18.9750, lng: 72.8258},
    {lat: 17.3700, lng: 78.4800}
  ];
  // Construct the polygon.
  var Triangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#9F81F7',
    fillOpacity: 0.35
  });
  Triangle.setMap(map);
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
  </body>
</html>

Rectangle

Similar to polygon even the Rectangle as properties such as weight, color and opacity, but whereas the rectangle has a property called bounds which is specified using the following path google.maps.LatLngBounds.

The example below demonstrate the code for creating a rectangle to indicate a particular region on map.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title> Simple Rectangles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 17.3700, lng: 78.4800},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '##2E2EFE',
    fillOpacity: 0.35,
    map: map,
    bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(15.4989, 73.8278),
                  new google.maps.LatLng(17.3700, 78.4800)
               )
  });
}
    </script>
  </head>
  <body>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
  </body>
</html>

Circles

Some specific classes are included for a circle object, in addition to Polygon classes in Google Maps API. Following are the properties supported by circle in Google Maps.

The example below demonstrate the code for creating simple circle on the map indicating major and minor earthquake zones in India.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var Indiamap = {
srinagar: {
center: {lat: 34.0900, lng: 74.7900},
circlesize: 100000
},
jammu: {
center: {lat: 33.4500, lng: 76.2400},
circlesize: 80000
},
jalandhar: {
center: {lat: 31.3260, lng: 75.5760},
cirlcesize: 80000
},
dehradun: {
center: {lat: 30.3180, lng: 78.0290},
circlesize: 80000
},
meerut: {
center: {lat: 28.9900, lng: 77.7000},
circlesize: 70000
},
delhi: {
center: {lat:28.6139, lng: 77.2090},
circlesize: 60000
},
guwahati: {
center: {lat: 26.1833, lng: 91.7333},
circlesize: 80000
},
patna: {
center: {lat: 25.6000, lng: 85.1000},
circlesize: 70000
},
agra: {
center: {lat: 27.1800, lng: 78.0200},
circlesize: 50000
},
kanpur: {
center: {lat: 26.5000, lng: 80.3000},
circlesize: 50000
},
kolkata: {
center: {lat: 22.5667, lng: 88.3667},
circlesize: 50000
},
bhubaneswar: {
center: {lat: 20.2700, lng: 85.8400},
circlesize: 50000
},
vijayawada: {
center: {lat: 16.5083, lng: 80.6417},
circlesize: 50000
},
chennai: {
center: {lat: 13.0827, lng: 80.2707},
circlesize: 50000
},
trivandrum: {
center: {lat: 8.4875, lng: 76.9525},
circlesize: 50000
},
kochi: {
center: {lat: 9.9700, lng: 76.2800},
circlesize: 50000
},
kanpur: {
center: {lat: 26.5000, lng: 80.3000},
circlesize: 50000
},
indore: {
center: {lat: 22.7000, lng: 75.9000},
circlesize: 70000
},
mangalore: {
center: {lat: 12.8700, lng: 74.8800},
circlesize: 50000 
},
pune: {
center: {lat: 18.5203, lng: 73.8567},
circlesize: 50000
},
mumbai: {
center: {lat: 18.9750, lng: 72.8258},
circlesize: 50000
},
surat: {
center: {lat: 21.1700, lng: 72.8300},
circlesize: 50000
},
gujrat: {
center: {lat: 23.2167, lng: 72.6833},
circlesize: 50000
}
};
function initMap() {
// Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 21.0000, lng: 78.0000},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        // Construct the circle for each value in citymap.
        for (var city in Indiamap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: Indiamap[city].center,
            radius: Math.sqrt(Indiamap[city].circlesize) * 150
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Editing and Dragging a shape

The Google Maps JavaScript API provide the user to edit or drag a shape on the map. The editing and dragging shapes on a map make the user to move the shape easily on the particular region or location as per the need.

The example below demonstrate the code for dragging the shape on a map.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Draggable Polygons</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// This example creates draggable triangles on the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 21.0000, lng:  78.0000},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var blueCoords = [
    {lat: 17.3700, lng: 78.4800},
    {lat: 12.9667, lng: 77.5667},
    {lat: 18.9750, lng: 72.8258}
  ];
  var redCoords = [
    {lat: 28.6139, lng: 77.2090},
    {lat: 27.1800, lng: 78.0200},
    {lat: 26.9000, lng: 75.8000}
  ];
  // Construct a draggable red triangle with geodesic set to true.
  new google.maps.Polygon({
    map: map,
    paths: redCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
  });
  // Construct a draggable blue triangle with geodesic set to false.
  new google.maps.Polygon({
    map: map,
    paths: blueCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: false
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&signed_in=true" async defer>
    </script>
  </body>
</html>

The example below demonstrate the code for editing the shape on a map.

<!DOCTYPE html>
<html>
  <head>
    <title>User-editable Shapes</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // This example adds a user-editable rectangle to the map.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 21.0000, lng: 78.0000},
          zoom: 6
        });
        var bounds = {
          north: 17.3700,
          south: 15.4989,
          east:  78.4800,
          west:  73.8278
        };
        // Define a rectangle and set its editable property to true.
        var rectangle = new google.maps.Rectangle({
          bounds: bounds,
          editable: true
        });
        rectangle.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Summary

  • Google Maps API provide custom shapes to indicate a particular region or locations by which user can easily create a shape on the map.
  • User can remove the shapes from the map by simply passing null value to setMap() object like shown below.

    Polylinepolyline.setMap(null);
    Polygonpolygon.setMap(null);
    Rectanglerectangle.setMap(null);
    Circlecircle.setMap(null);

  • 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.