GoogleMap polyline

google map draw polyline

by allen Yu

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
}

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 24.977179,
      lng: 121.312848
    },
    mapTypeId: 'roadmap',
    zoom: 13
  });

  var bikeLaneCoordinates = [{
      lat: 24.977685,
      lng: 121.310424
    },
    {
      lat: 24.977179,
      lng: 121.312848
    },
    {
      lat: 24.977879,
      lng: 121.317708
    },
    {
      lat: 24.978132,
      lng: 121.319951
    }
  ];
  var bikeLanePath = new google.maps.Polyline({
    path: bikeLaneCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  bikeLanePath.setMap(map);
}
initMap();