Symbols (Vector-Based Icons)

  1. Introduction
  2. Properties of a symbol
  3. Predefined symbols
  4. Add a symbol to a marking
  5. Add a symbol to a polyline
  6. Animate a symbol

Introduction

A Symbol is a vector-based icon that tin be displayed on a Marker or a Polyline object. The symbol's shape is defined by a path using SVG path annotation. While path is the merely required belongings, the Symbol object supports a multifariousness of properties allowing you to customize visual aspects, such as the colour and weight of the stroke and fill. Run across the list of properties.

Several predefined symbols are bachelor via the SymbolPath class. Run across the list below.

Properties of a symbol

Note that the default behavior of a Symbol varies slightly depending upon whether it appears on a marker or a polyline. These variances are described in the listing of backdrop below.

A Symbol supports the following backdrop:

  • path (required) is the path defining the shape of the symbol. You can use one of the predefined paths in google.maps.SymbolPath or define a custom path using SVG path annotation. Note: Vector paths on a polyline must fit within a 22x22px square. If your path includes points outside this square, then you must adjust the symbol's scale property to a fractional value, such as 0.2, and so that the resulting scaled points fit within the foursquare.
  • anchor sets the position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor'southward ten and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate arrangement as the symbol's path.
  • fillColor is the color of the symbol'south fill (that is, the region bordered by the stroke). All CSS3 colors are supported except for extended named colors. For symbols on markers, the default is 'black'. For symbols on polylines, the default is the stroke color of the corresponding polyline.
  • fillOpacity defines the relative opacity (that is, lack of transparency) of the symbol's fill up. The values range from 0.0 (fully transparent) to ane.0 (fully opaque). The default is 0.0.
  • rotation is the angle by which to rotate the symbol, expressed clockwise in degrees. By default, a symbol marker has a rotation of 0, and a symbol on a polyline is rotated by the angle of the border on which it lies. Setting the rotation of a symbol on a polyline volition ready the rotation of the symbol such that it will no longer follow the curve of the line.
  • scale sets the amount by which the symbol is scaled in size. For symbol markers, the default scale is 1. After scaling the symbol may be of any size. For symbols on a polyline, the default scale is the stroke weight of the polyline. Subsequently scaling, the symbol must prevarication within a 22x22px square, centered at the symbol's anchor.
  • strokeColor is the colour of the symbol'due south outline. All CSS3 colors are supported except for extended named colors. For symbols on markers, the default is 'black'. For symbols on a polyline, the default color is the stroke colour of the polyline.
  • strokeOpacity determines the relative opacity (that is, lack of transparency) of the symbol's stroke. The values range from 0.0 (fully transparent) to 1.0 (fully opaque). For symbol markers, the default is 1.0. For symbols on polylines, the default is the stroke opacity of the polyline.
  • strokeWeight defines the weight of the symbol'due south outline. The default is the scale of the symbol.

Predefined symbols

The Maps JavaScript API provides some built-in symbols that you can add together to markers or polylines via the SymbolPath form.

The default symbols include a circumvolve and two types of arrows. Both forwards and backward facing arrows are available. This is peculiarly useful for polylines, because the orientation of a symbol on a polyline is fixed. Forward is considered to be in the direction of the terminus of the polyline.

You can modify the stroke or fill of the predefined symbols using any of the default symbol options.

The following predefined symbols are included:

Name Description Instance
google.maps.SymbolPath.CIRCLE A circle.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW A backward-pointing arrow that is closed on all sides.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW A forrard-pointing arrow that is closed on all sides.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW A astern-pointing pointer that is open on one side.
google.maps.SymbolPath.FORWARD_OPEN_ARROW A frontward-pointing arrow that is open on one side.

Add together a symbol to a marker

To brandish a vector-based icon on a marker, pass a Symbol object literal with the desired path to the marker's icon property. The following instance uses SVG path annotation to create a custom icon for a marker.

TypeScript

// This example uses SVG path notation to add together a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a bluish fill and no border.  function initMap(): void {   const center = new google.maps.LatLng(-33.712451, 150.311823);   const map = new google.maps.Map(     certificate.getElementById("map") every bit HTMLElement,     {       zoom: 9,       center: center,     }   );    const svgMarker = {     path: "M10.453 14.016l6.563-half dozen.609-1.406-1.406-5.156 five.203-2.063-2.109-one.406 1.406zM12 two.016q2.906 0 4.945 ii.039t2.039 iv.945q0 one.453-0.727 3.328t-1.758 three.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-ane.688-2.156-2.133-3.141-i.664-iii.445-0.75-three.375q0-2.906 two.039-4.945t4.945-2.039z",     fillColor: "blue",     fillOpacity: 0.6,     strokeWeight: 0,     rotation: 0,     scale: 2,     anchor: new google.maps.Point(xv, 30),   };    new google.maps.Marking({     position: map.getCenter(),     icon: svgMarker,     map: map,   }); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;

JavaScript

// This case uses SVG path note to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a bluish fill and no border. role initMap() {   const center = new google.maps.LatLng(-33.712451, 150.311823);   const map = new google.maps.Map(document.getElementById("map"), {     zoom: 9,     center: center,   });   const svgMarker = {     path: "M10.453 14.016l6.563-half-dozen.609-ane.406-1.406-v.156 v.203-2.063-ii.109-one.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 ane.453-0.727 iii.328t-1.758 3.516-two.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-three.141-one.664-3.445-0.75-3.375q0-ii.906 2.039-4.945t4.945-ii.039z",     fillColor: "blue",     fillOpacity: 0.6,     strokeWeight: 0,     rotation: 0,     scale: ii,     anchor: new google.maps.Indicate(15, xxx),   };    new google.maps.Marker({     position: map.getCenter(),     icon: svgMarker,     map: map,   }); }  window.initMap = initMap;

View case

Endeavor Sample

Add a symbol to a polyline

To display symbols on a polyline, set the icons[] property of the PolylineOptions object. The icons[] assortment takes i or more than IconSequence object literals, with the following properties:

  • icon (required) is the symbol to render on the line.
  • offset determines the distance from the start of the line at which an icon is to be rendered. This distance may be expressed equally a per centum of the line's length (for example, 'l%') or in pixels (for example, '50px'). The default is '100%'.
  • repeat determines the distance between consecutive icons on the line. This altitude may be expressed equally a percentage of the line's length (for example, 'l%') or in pixels (for example, '50px'). To disable repeating of the icon, specify '0'. The default is '0'.

With a combination of symbols and the PolylineOptions form, yous have a lot of control over the await and feel of polylines on your map. Below are some examples of customizations you can use.

Arrows

Apply the IconSequence.starting time property to add arrows to the start or end of your polyline.

// Define a symbol using a predefined path (an arrow) // supplied by the Google Maps JavaScript API. var lineSymbol = {   path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW };  // Create the polyline and add the symbol via the 'icons' property. var line = new google.maps.Polyline({   path: [{lat: 22.291, lng: 153.027}, {lat: eighteen.291, lng: 153.027}],   icons: [{     icon: lineSymbol,     offset: '100%'   }],   map: map });

View example

Dashed lines

Y'all tin can achieve a dashed line effect by setting the opacity of your polyline to 0, and overlaying an opaque symbol over the line at regular intervals.

// Define a symbol using SVG path notation, with an opacity of 1. var lineSymbol = {   path: 'M 0,-1 0,1',   strokeOpacity: ane,   scale: 4 };  // Create the polyline, passing the symbol in the 'icons' property. // Requite the line an opacity of 0. // Echo the symbol at intervals of 20 pixels to create the dashed effect. var line = new google.maps.Polyline({   path: [{lat: 22.291, lng: 153.027}, {lat: xviii.291, lng: 153.027}],   strokeOpacity: 0,   icons: [{     icon: lineSymbol,     offset: '0',     echo: '20px'   }],   map: map });

View example

Custom paths

Custom symbols allow yous to add many unlike shapes to a polyline.

// Define the custom symbols. All symbols are divers via SVG path notation. // They have varying stroke color, fill colour, stroke weight, // opacity and rotation properties.   var symbolOne = {     path: 'K -2,0 0,-2 2,0 0,2 z',     strokeColor: '#F00',     fillColor: '#F00',     fillOpacity: one   };    var symbolTwo = {     path: 'M -ane,0 A 1,1 0 0 0 -3,0 1,ane 0 0 0 -1,0M 1,0 A ane,i 0 0 0 3,0 one,1 0 0 0 1,0M -3,3 Q 0,5 iii,3',     strokeColor: '#00F',     rotation: 45   };    var symbolThree = {     path: 'M -2,-2 two,2 M ii,-ii -two,2',     strokeColor: '#292',     strokeWeight: iv   };    // Create the polyline and add the symbols via the 'icons' holding.   var line = new google.maps.Polyline({     path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],     icons: [       {         icon: symbolOne,         showtime: '0%'       }, {         icon: symbolTwo,         commencement: 'fifty%'       }, {         icon: symbolThree,         offset: '100%'       }     ],     map: map   });

View example

Animate a symbol

You can breathing a symbol along a path by using the DOM's window.setInterval() function to modify the offset of the symbol at fixed intervals.

TypeScript

// This example adds an animated symbol to a polyline.  function initMap(): void {   const map = new google.maps.Map(     document.getElementById("map") every bit HTMLElement,     {       center: { lat: 20.291, lng: 153.027 },       zoom: 6,       mapTypeId: "terrain",     }   );    // Ascertain the symbol, using one of the predefined paths ('CIRCLE')   // supplied past the Google Maps JavaScript API.   const lineSymbol = {     path: google.maps.SymbolPath.CIRCLE,     calibration: 8,     strokeColor: "#393",   };    // Create the polyline and add the symbol to it via the 'icons' belongings.   const line = new google.maps.Polyline({     path: [       { lat: 22.291, lng: 153.027 },       { lat: xviii.291, lng: 153.027 },     ],     icons: [       {         icon: lineSymbol,         first: "100%",       },     ],     map: map,   });    animateCircle(line); }  // Use the DOM setInterval() function to alter the offset of the symbol // at stock-still intervals. office animateCircle(line: google.maps.Polyline) {   let count = 0;    window.setInterval(() => {     count = (count + 1) % 200;      const icons = line.get("icons");      icons[0].offset = count / two + "%";     line.set("icons", icons);   }, 20); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline. function initMap() {   const map = new google.maps.Map(certificate.getElementById("map"), {     center: { lat: twenty.291, lng: 153.027 },     zoom: 6,     mapTypeId: "terrain",   });   // Define the symbol, using one of the predefined paths ('CIRCLE')   // supplied past the Google Maps JavaScript API.   const lineSymbol = {     path: google.maps.SymbolPath.CIRCLE,     scale: 8,     strokeColor: "#393",   };   // Create the polyline and add the symbol to it via the 'icons' property.   const line = new google.maps.Polyline({     path: [       { lat: 22.291, lng: 153.027 },       { lat: 18.291, lng: 153.027 },     ],     icons: [       {         icon: lineSymbol,         outset: "100%",       },     ],     map: map,   });    animateCircle(line); }  // Use the DOM setInterval() role to alter the beginning of the symbol // at fixed intervals. part animateCircle(line) {   allow count = 0;    window.setInterval(() => {     count = (count + 1) % 200;      const icons = line.get("icons");      icons[0].offset = count / 2 + "%";     line.prepare("icons", icons);   }, 20); }  window.initMap = initMap;

View case

Try Sample