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&libraries=geometry">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  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() {
  updatePolylinePrototype();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var line = new google.maps.Polyline({
    path: [{
      lat: 25.774266,
      lng: -80.193659
    }, {
      lat: 25.83333,
      lng: 25.83333 - 77.8999964
    }, {
      lat: 28.411413, 
      lng: -16.5449611
    }],
    strokeColor: '#ffffff',
    strokeWeight: 1,
    map: map
  });
  var marker = new google.maps.Marker({
    icon: {
      url: "http://earth.google.com/images/kml-icons/track-directional/track-12.png",
      anchor: new google.maps.Point(12, 12),
      scaledSize: new google.maps.Size(24, 24),
    },
    position: line.getPath().getAt(0),
    map: 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);
  animateShip(line, marker);
}

function animateShip(line, marker) {
  var count = 0;
  var lineDistance=0;
  for (var i=1; i<line.getPath().getLength(); i++) {
    lineDistance += google.maps.geometry.spherical.computeDistanceBetween(line.getPath().getAt(i-1),line.getPath().getAt(i))
  }
  
  window.setInterval(function() {
    count = (count + 1) % 200;

    marker.setPosition(line.GetPointAtDistance(lineDistance -(lineDistance * count / 200)));
  }, 20);
}
function updatePolylinePrototype() {
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetPointAtDistance = function(metres) {
  // some awkward special cases
  if (metres == 0) return this.getPath().getAt(0);
  if...