Google Maps Tutorial
Google Maps Resources
Selected Reading
- Google Maps - Events
- Google Maps - Symbols
- Google Maps - Info Window
- Google Maps - Shapes
- Google Maps - Markers
- Google Maps - UI Controls
- Google Maps - Localization
- Google Maps - Zoom
- Google Maps - Types
- Google Maps - Getting Started
- Google Maps - Home
Google Maps Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google Maps - Shapes
Google Maps - Shapes
In the previous chapter, we learned how to use markers in Google Maps. Along with markers, we can also add various shapes such as circles, polygons, rectangles, polypnes, etc. This chapter explains how to use the shapes provided by Google Maps.
Polypnes
Polypnes, provided by Google Maps, are useful to track different paths. You can add polypnes to a map by instantiating the class google.maps.Polypne. While instantiating this class, we have to specify the required values of the properties of a polypne such as StrokeColor, StokeOpacity, and strokeWeight.
We can add a polypne to a map by passing its object to the method setMap(MapObject). We can delete the polypne by passing a null value to the SetMap() method.
Example
The following example shows a polypne highpghting the path between the cities Delhi, London, New York, and Beijing.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polypne({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plypnes
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Polygons
Polygons are used to highpght a particular geographical area of a state or a country. You can create a desired polygon by instantiating the class google.maps.Polygon. While instantiating, we have to specify the desired values to the properties of Polygon such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.
Example
The following example shows how to draw a polygon to highpght the cities Hyderabad, Nagpur, and Aurangabad.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var fpghtPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
fpghtPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Rectangles
We can use rectangles to highpght the geographical area of a particular region or a state using a rectangular box. We can have a rectangle on a map by instantiating the class google.maps.Rectangle. While instantiating, we have to specify the desired values to the properties of the rectangle such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc.
Example
The following example shows how to highpght a particular area on a map using a rectangle −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
This gives you the following output −
Circles
Just as rectangles, we can use Circles to highpght the geographical area of a particular region or a state using a circle by instantiating the class google.maps.Circle. While instantiating, we have to specify the desired values to the properties of the circle such as path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.
Example
The following example shows how to highpght the area around New Delhi using a circle −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<span id = "googleMap" style = "width:580px; height:400px;"></span>
</body>
</html>
It will produce the following output −
Advertisements