#### Chapter 10

5 Steps - 3 Clicks

### Introduction

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

### Description

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.

### Description

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.

### Example

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

```<!DOCTYPE html>
<html>
<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;
}
#map {
height: 100%;
}
</style>
<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},
});

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}
];
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}
</script>
<script async defer
</body>
```

### Description

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.

### Example

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

```<!DOCTYPE html>
<html>
<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;
}
#map {
height: 100%;
}
</style>
<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},
});
// 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.
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#9F81F7',
fillOpacity: 0.35
});
Triangle.setMap(map);
}
</script>
<script async defer
</body>
</html>
```

### Description

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

### Example

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

```<!DOCTYPE html>
<html>
<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;
}
#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},
});
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '##2E2EFE',
fillOpacity: 0.35,
map: map,
)
});
}
</script>
<body>
<div id="map"></div>
<script async defer
</body>
</html>
```

### Description

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.

### Example

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

```<!DOCTYPE html>
<html>
<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;
}
#map {
height: 100%;
}
</style>
<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
},
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
},
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},
});

// Construct the circle for each value in citymap.
for (var city in Indiamap) {
// Add the circle for this city to the map.
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: Indiamap[city].center,
});
}
}
</script>
<script async defer
</script>
</body>
</html>
```

### Description

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.

### Example 1

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

```<!DOCTYPE html>
<html>
<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;
}
#map {
height: 100%;
}
</style>
<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},
});
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.
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.
map: map,
paths: blueCoords,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.35,
draggable: true,
geodesic: false
});
}
</script>
</script>
</body>
</html>
```

### Example 2

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

```<!DOCTYPE html>
<html>
<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;
}
#map {
height: 100%;
}
</style>
<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.
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
</script>
<script async defer
</script>
</body>
</html>
```

### Key Points

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

Polyline`polyline.setMap(null);`
Polygon`polygon.setMap(null);`
Rectangle`rectangle.setMap(null);`
Circle`circle.setMap(null);`

### Programming Tips

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