JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {

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

var bounds = new google.maps.LatLngBounds();

// start coordinates
var start = ['51.97559, 4.12565', 
             '55.46242, 8.43872', 
             '49.49259, 0.1065',
             '50.36862, -4.13412']

// end coordinates
var end = ['51.94784, 1.2539', 
           '51.74784, 1.2539', 
           '50.79726, -1.11048',
           '43.45846, -3.80685']

    for (var i=0; i < end.length; i++){
      var startCoords = start[i].split(",");
      var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
      var endCoords = end[i].split(",");
      var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
      calcRoute(startPt, endPt);
      bounds.extend(startPt);
      bounds.extend(endPt);
    }
    map.fitBounds(bounds);
}

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [source, destination],
     strokeColor: 'red',
     strokeWeight: 2,
     strokeOpacity: 1
  });

  polyline.setMap(map);          
}

google.maps.event.addDomListener(window, "load", initialize);