JSFiddle - React, Tailwind, and code Playground

by brendaz

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 links = [];
         var link2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
             link1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
         links.push(link1);
         links.push(link2);

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

     function doJob(polyline_bounds) {
         var polyline;
         polyline = new google.maps.Polyline({
             path: polyline_bounds,
             strokeColor: "#0000FF",
             strokeOpacity: 0.5,
             strokeWeight: 6
         });
         polyline.setMap(map);
    var info = new google.maps.InfoWindow({ 
        content: "Position",
        pixelOffset  : new google.maps.Size(200, -200)
    });

         google.maps.event.addListener(polyline, 'mouseover', function (event) {
             info.setPosition(event.latLng);
             info.pixelOffset = new google.maps.Size(0, 30);
             info.open(map);
         });

         google.maps.event.addListener(polyline, 'mouseout', function (event) {
             info.close(map);
         });
     }
     google.maps.event.addDomListener(window, 'load', initialize);