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.
- Polylines
- Polygons
- Rectangles
- Circles
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.
- strokeOpacity - The line Opacity can be specified using strokeOpacity and the value ranges from 0.0 to 1.0.
- strokeColor - The line hexadecimal HTML color can be specified using strokeColor (ex: “#FFFFFF”).
- strokeWeight - The line’s stroke weight can be specified in pixel using the strokeWeight.
- path - The line LatLng co-ordiantes can be specified using path.
- editable - The user can edit the line using the editable property.
Example
The example below demonstrate the code for creating a simple Polyline on a map.
[c]
<!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>
[/c]
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.
- strokeColor – The line hexadecimal HTML color can be specified using strokeColor (ex: “#FFFFFF”).
- strokeOpacity – The line Opacity can be specified using strokeOpacity and the value ranges from 0.0 to 1.0.
- strokeWeight – The line’s stroke weight can be specified in pixel using the strokeWeight.
- path – The line LatLng co-ordiantes can be specified using path.
- fillOpacity – The opacity of the fill color of a shape can be specified using the fillOpacity.
- editable – The user can edit the line using the editable property.
- fillColor – The shape or region’s hexadecimal color can be specified using the fillColor.
Example
The example below demonstrate the code for creating a Polygon between three different locations using LatLng co-ordinates.
[c]
<!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>
[/c]
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.
[c]
<!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>
[/c]
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.
- strokeColor - The line’s hexadecimal HTML color can be specified using strokeColor (ex: “#FFFFFF”).
- strokeOpacity - The line Opacity can be specified using strokeOpacity and the value ranges from 0.0 to 1.0.
- strokeWeight - The line’s stroke weight can be specified in pixel using the strokeWeight.
- path – The line LatLng co-ordiantes can be specified using path.
- fillOpacity - The opacity of the fill color of a shape can be specified using the fillOpacity.
- editable - The user can edit the line using the editable property.
- fillColor - The shape or region’s hexadecimal color can be specified using the fillColor.
- radius - The circle radius is specified in meters.
- center - The circle center is specified using
google.maps.LatLng.
Example
The example below demonstrate the code for creating simple circle on the map indicating major and minor earthquake zones in India.
[c]
<!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>
[/c]
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.
[c]
<!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>
[/c]
Example 2
The example below demonstrate the code for editing the shape on a map.
[c]
<!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>
[/c]
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
nullvalue tosetMap()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.