Simple Polylines

by agraebe

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

#map {
  height: 100%;
}

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

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 38.89399, lng: -77.03659}
  });

  var coordinates = [
  	{lat: 38.893596444352134, lng: -77.0381498336792},
    {lat: 38.89337933372204, lng: -77.03792452812195},
    {lat: 38.89316222242831, lng: -77.03761339187622},
    {lat: 38.893028615148424, lng: -77.03731298446655},
    {lat: 38.892920059048464, lng: -77.03691601753235},
    {lat: 38.892903358095296, lng: -77.03637957572937},
    {lat: 38.89301191422077, lng: -77.03592896461487},
    {lat: 38.89316222242831, lng: -77.03549981117249},
    {lat: 38.89340438498248, lng: -77.03514575958252},
    {lat: 38.893596444352134, lng: -77.0349633693695}
  ];
  var path = new google.maps.Polyline({
    path: coordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  path.setMap(map);
}