202206/11

Maps API Draw Polyline

Create A Map Object

 var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: {
        lat: 45.4215296,
        lng: -75.6971931
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
});

JavaScript

Learn more how to Display / Show Google Maps on the view.

Define Line Coordinates

var lineCoordinates = [
     new google.maps.LatLng(45.4215296, -75.6971931),
     new google.maps.LatLng(45.4215296, -75.6571931)
];

JavaScript

Line Symbol Style

var lineSymbol = {
  path: 'M 0,-2 0,1',
  strokeOpacity: 1,
  scale: 4
};

JavaScript

Draw Polyline On The Map

var line = new google.maps.Polyline({
  path: lineCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

JavaScript