In addition to markers, polygons, polylines, 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 polyline. Just like other overlays, to draw these predefined symbols on a map, we have to instantiate their respective classes. Given below is a list 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()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body> </html>It produces the following output −
Animating the Symbol
Just like 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()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body> </html>It produces the following output −
Advertisem*nts
