Google Maps - Symbols

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.
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
Circle − google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) − google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Backward Pointing arrow (closed) − google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) − google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (closed) − google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
Backward 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.
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 −
Just like markers, you can add animations such as bounce and drop to the symbols as well.
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 −

    20 Lectures 
     2.5 hours 

 Asif Hussain

    7 Lectures 
     1 hours 

 Aditya Kulkarni

    33 Lectures 
     2.5 hours 

 Sasha Miller

    22 Lectures 
     1.5 hours 

 Zach Miller

    16 Lectures 
     1.5 hours 

 Sasha Miller

    23 Lectures 
     2.5 hours 

 Sasha Miller
 Print
 Add Notes
 Bookmark this page