JSFiddle - React, Tailwind, and code Playground

by ABBEYSOFT

HTML

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

CSS

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

JavaScript

var map;

     function initialize() {

       var mapOptions = {
         center: new google.maps.LatLng(-3, 23),
         zoom: 5,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };

       map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);

       var bounds = [];
       var bounds_group_1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
         bounds_group_2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
       bounds.push(bounds_group_1);
       bounds.push(bounds_group_2);

       for (var i = 0; i < bounds.length; i++) {
         doJob(bounds[i]);
       }
     }

     function doJob(bounds) {
       var polyline;
       polyline = new google.maps.Polyline({
         path: bounds,
         strokeColor: "#0000FF",
         strokeOpacity: 0.5,
         strokeWeight: 6
       });

       polyline.setMap(map);


       google.maps.event.addListener(polyline, 'mouseover', function(event) {
         this.setOptions({
           strokeOpacity: 1
         });
       });

       google.maps.event.addListener(polyline, 'mouseout', function(event) {
         this.setOptions({
           strokeOpacity: 0.5
         });
       });
     }
     google.maps.event.addDomListener(window, 'load', initialize);