Maps API v3 Directions Waypoints

Directions service with waypoints and custom markers.

by Arjan Haverkamp

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height:400px;
}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false	
    });

    var myOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    directionsDisplay.setMap(map);
    calcRoute();
}

var points = [
  [5.9878224134445,49.510696212291],
  [6.0119462013245,49.553697672793],
  [6.0573774576187,49.579394827177],
  [6.0613337159157,49.615720366827],
  [6.0672479867935,49.641469977199],
  [6.0875442624092,49.698626031179],
  [6.098318696022,49.723208185819],
  [6.1057108640671,49.753056693368],
  [6.0989785194397,49.795179786516],
  [6.097047328949,49.811355517248],
  [6.1361861228943,49.887418286465],
  [6.0847515,49.9357208],
  [6.0818445682526,49.951860190825],
  [6.0702574253082,50.143282180046],
  [5.95333725214,50.218348058403],
  [5.8716291189194,50.372288402836],
  [5.9468597173691,50.45037925439],
  [5.8815640211105,50.486231278729],
  [5.8180117607117,50.514272501167],
  [5.8114403486252,50.531978207738],
  [5.8278876543045,50.541199323322],
  [5.8636522293091,50.561053803343],
  //[5.8665812015533,50.572465065781],
  //[5.8514937758446,50.587150144345],
 // [5.854280591011,50.596081242101],
  //[5.8311975002289,50.619511994883],
  //[5.8207234740257,50.644427871644],
  //[5.858952999115,50.701905973089],
 // [5.8476984500885,50.758178595089],
 // [5.9018951654434,50.782795374446],
 // [5.9469482302666,50.845183352287],
 // [5.9309381246567,50.849188532566],
  [5.9001865983009,50.843952092465],
  [5.8310124278069,50.847384973857],
  [5.793540040031076,50.85900681093335],
  [5.7811233401299,50.863242046877],
  [5.7837358117104,50.868779322741]
  
  
];

function calcRoute() {
    var start = new google.maps.LatLng(points[0][1], points[0][0]);
    var end = new...