Simple Polylines

by Lawrence Ross

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

CSS

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var path = [{
      lat: 37.772,
      lng: -122.214
    },
    {
      lat: 21.291,
      lng: -157.821
    },
    {
      lat: -18.142,
      lng: 178.431
    },
    {
      lat: -27.467,
      lng: 153.027
    }
  ];
  var lineSymbol = new google.maps.Marker({
    icon: {
      anchor: new google.maps.Point(16, 16), // center icon on end of polyline
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(32, 32),
      size: new google.maps.Size(64, 64),
      url: "https://i.stack.imgur.com/7Fzjf.png"
    },
    position: path[path.length - 1],
    map: map
  });
  var Line = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: "#35495e",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
  });
  Line.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < Line.getPath().getLength(); i++) {
    bounds.extend(Line.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}