JSFiddle - React, Tailwind, and code Playground

by ferian

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 polylinedata = [ { lat : 15, lon : 35 }, { lat : 20, lon : 20 }, { lat : 10, lon : 10 } ];
var markers = [];
var lines = [];

function initialize() {
    
    // Initialize map normally and set it's options
    
    var mapOptions = {
        center: new google.maps.LatLng(20,20), 
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP 
                    };
    var map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
console.log(polylinedata.length);
    
    // Create markers to corresponding coordinates in polylinedata array
    
    for (var i = 0; i < polylinedata.length; i++) {
        markers.push(new google.maps.Marker({
            position: new google.maps.LatLng(polylinedata[i].lat, polylinedata[i].lon)
        }));
    };
    
    // Plot markers

    for (var i = 0; i < markers.length; i++) { 
        markers[i].setMap(map);        
    };
    
    // Prepare polyline array
    
    for (var i = 0; i < polylinedata.length; i++) {
        if (i < polylinedata.length - 1 ) {          
            var from = polylinedata[i];
            var to = polylinedata[i+1];

            var line = new google.maps.Polyline({
                path: [
                    new google.maps.LatLng(from.lat, from.lon),
                    new google.maps.LatLng(to.lat, to.lon)
                    ],
                strokeColor: "#0000FF",
                strokeOpacity: 0.5,
                strokeWeight: 6
            });
            
            // Creates a new myPolyLineClass instance that contains the polyline data and push it to lines array.
            
            lines.push(new myPolylineClass(line));
        };
    };
    
    // Set all the polylines and their individual listeners on map
    
    for (i in lines) {
        lines[i].polyline.setMap(map);
    };
}

function myPolylineClass(polyline) {
    
    /* Polyline class instance */
    
    this.polyline = polyline;
    
    // + all other data you want the polylines...