JSFiddle - React, Tailwind, and code Playground

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

function initialize() {

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

    function Link(from, to) {
        this.from = from;
        this.to = to;
    }


    Link.prototype.show = function() {
        this.line = new google.maps.Polyline({
            path: [this.from, this.to],
            strokeColor: "#0000FF",
            strokeOpacity: 0.5,
            strokeWeight: 6
        });

        this.line.setMap(map);

        google.maps.event.addListener(this.line, 'mouseover', function(data, data2) {
        alert(data2);
            this.line.setOptions({
                strokeOpacity: 0
            });
        });

        google.maps.event.addListener(this.line, 'mouseout', function() {
            this.line.setOptions({
                strokeOpacity: 0.5
            });
        });
    }
    var links = [];
    var link2 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)),
        link1 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18));
    links.push(link1);
    links.push(link2);

    // I've a long list of links, so I'll prefer a loop
    for (var i = 0; i < links.length; i++) {
        links[i].show();
    }

}

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