JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

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

CSS

.map {
  width: 100%;
  height: 100%;
}

body,
html {
  height: 100%;
  width: 100%;
}

JavaScript

$(document).ready(function() {
  var markers = [{
    "title": '',
    "lat": '56.965969',
    "lng": '24.143496',
    "description": ''
  }, {
    "title": '',
    "lat": '56.966259',
    "lng": '24.385860',
    "description": ''
  }];
  var service = new google.maps.DirectionsService();
  var polyArray = [];
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
  var lat_lng = new Array();
  var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  var image = 'https://maps.google.com/mapfiles/ms/micons/blue.png';
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(56.966259, 24.385860),
    map: map,
    title: 'Sillava',
    icon: image
  });
  for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
  }
  for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      service.route({
        origin: src,
        destination: des,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var j = 0; j < result.routes.length; j++) {
            var path = new google.maps.MVCArray();
            polyArray.push(new google.maps.Polyline({
              map: map,
              strokeColor: "grey",
              strokeOpacity: 0.3,
              strokeWeight: 5
            }));
            if (j == 0) polyArray[0].setOptions({
              strokeColor: '#00ff00',
              strokeOpacity: 1.0
            });
            polyArray[polyArray.length - 1].setPath(path);
            google.maps.event.addListener(polyArray[polyArray.length - 1], 'click', function() {
              for (var i = 0; i < polyArray.length;...