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 - Symbols
Google Maps - Symbols
In addition to markers, polygons, polypnes, and other geometrical shapes, we can also add predefined vector images(symbols) on a map. This chapter explains how to use the symbols provided by Google Maps.
Adding a Symbol
Google provides various vector-based images (symbols) that can be used on a marker or a polypne. Just pke other overlays, to draw these predefined symbols on a map, we have to instantiate their respective classes. Given below is a pst of predefined symbols provided by Google and their class names −
Circle − google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) − google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) − google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
These symbols have the following properties − path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity, and strokeWeight.
Example
The following example demonstrates how to draw predefined symbols on Google Map.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Animating the Symbol
Just pke markers, you can add animations such as bounce and drop to the symbols as well.
Example
The following example shows how to use a symbol as a marker on a map and add animation to it −
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
animation:google.maps.Animation.DROP,
draggable:true,
map: map
});
}
</script>
</head>
<body onload = "loadMap()">
<span id = "sample" style = "width:580px; height:400px;"></span>
</body>
</html>
It produces the following output −
Advertisements