JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTlBkIsBJqC5jME9-69xcaMvhXOMhRR5Y&amp;libraries=places"></script>
<div id="map"></div>

CSS

html, body{
  margin:0;
  padding:0;
  height:100%;
}
#map{
  position:fixed;
  top:0;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:100%;
}
#auto{
  position:fixed;
  left:20px;
  top:20px;
  z-index:1000;
}

JavaScript

var mapOptions = {
    center:{
      lat: 54.59728500000001, lng: -5.930119999999988
    },
    zoom: 10,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    streetViewControl: false,
    rotateControl: true
  };
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var waypointsCoords = [	
  {lat: 71.169493, lng: 25.783163999999942},
  {lat: 69.6492047, lng: 18.955323799999974},
  {lat: 60.39126279999999, lng: 5.32205440000007},
  {lat: 55.864237, lng: -4.251805999999988},
  {lat: 54.59728500000001, lng: -5.930119999999988},
  {lat: 51.8968917, lng: -8.486315699999977},
  {lat: 51.4816403, lng: -3.178774100000055},
  {lat: 47.218371, lng: -1.553621000000021},
  {lat: 42.812526, lng: -1.645774500000016},
  {lat: 40.9701039, lng: -5.663539700000001},
  {lat: 37.01682929999999, lng: -8.940593100000001},
  {lat: 38.7222524, lng: -9.139336599999979},
];
waypointsCoords.forEach(function(item){
	var marker = new google.maps.Marker({
    position: item,
    map: map,
  });
});

var flightPath = new google.maps.Polyline({
    path: waypointsCoords,
    
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);