Google Maps Multiple Markers

by designworksinteractive

HTML

<div>
  <input id="check" type="checkbox" style="height:20px;" />optimizeWaypoints
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2VZvngp-Tff39y4oBI3Ox7jytqDEQoNs&libraries=geometry,places&ext=.js"></script>
</div>

CSS

* {
  color: red
}

JavaScript

var locations = [
  [
    "New Mermaid",
    36.9079, -76.199,
    1,
    "Georgia Mason",
    "",
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
    "coming soon"
  ],
  [
    "1950 Fish Dish",
    36.87224, -76.29518,
    2,
    "Terry Cox-Joseph",
    "Rowena's",
    "758 W. 22nd Street in front of Rowena's",
    "found"
  ],
  [
    "A Rising Community",
    36.95298, -76.25158,
    3,
    "Steven F. Morris",
    "Judy Boone Realty",
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
    "found"
  ],
  [
    "A School Of Fish",
    36.88909, -76.26055,
    4,
    "Steven F. Morris",
    "Sandfiddler Pawn Shop",
    "5429 Tidewater Dr.",
    "found"
  ],
  [
    "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
    "Myke Irving/ Georgia Mason",
    "USAVE Auto Rental",
    "Virginia Auto Rental on Virginia Beach Blvd",
    "found"
  ]
]

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(36.8857, -76.2599),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var waypts = []
for (var i = 1; i < locations.length - 1; i++) {
  waypts.push({
    location: new google.maps.LatLng(locations[i][1], locations[i][2]),
    stopover: true
  });
}

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
  suppressMarkers: true
});

directionsDisplay.setMap(map);

$("#check").on('click', function() {
  calDirection();
});

var markers = [];
calDirection = function() {
  
  directionsService.route({
      origin: new google.maps.LatLng(locations[0][1], locations[0][2]),
      destination: new google.maps.LatLng(locations[locations.length - 1][1], locations[locations.length - 1][2]),
      waypoints: waypts,
      optimizeWaypoints: document.getElementById("check").checked,
      travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
      
      if (status ===...