JSFiddle - React, Tailwind, and code Playground

by hongyang1033

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

CSS

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

JavaScript

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

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.94784, 1.2539', 
           '50.79726, -1.11048',
           '43.45846, -3.80685']

function initialize() {
    for (var i=0; i < end.length; i++){
      calcRoute(start[i], end [i]);
    }
}

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [],
     strokeColor: '#FF0000',
     strokeWeight: 5,
     strokeOpacity: 0.5
  });
    
  var directionsService = new google.maps.DirectionsService(); 
  var request = { 
     origin:source, 
     destination: destination, 
     travelMode: google.maps.DirectionsTravelMode.WALKING 
  };
    
  directionsService.route(request, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) {
        path = result.routes[0].overview_path;
         $(path).each(function(index, item) {
            polyline.getPath().push(item);
            bounds.extend(item);
         });

        polyline.setMap(map);
        map.fitBounds(bounds);
            
        // Custom infoWindow
        var toolTip = '<div id="map-box">'+
	       '<div id="siteNotice">'+
	       '</div>'+
	       '<h1 id="firstHeading" class="firstHeading">Ferry Route</h1>'+
	       '<div id="bodyContent">'+
	       '<p>Lorem ipsum dolor sit amet</p>'+
	       '</div>'+
	       '</div>';

        google.maps.event.addListener(polyline, 'click', function(event) {         
            infowindow.setContent(toolTip);
            infowindow.setPosition(event.latLng);
           ...