JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="play"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;
var video = "http://www.geocodezip.com/v3_MW_example_map4.html";
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var bounds = new google.maps.LatLngBounds();
    var polylineData = {
        "paths": [
            [{
                "lat": "21.329035778926478",
                "lng": "73.46008301171878"
            }, {
                "lat": "21.40065516914794",
                "lng": "78.30505371484378"
            }, {
                "lat": "20.106233605369603",
                "lng": "77.37121582421878"
            }, {
                "lat": "20.14749530904506",
                "lng": "72.65808105859378"
            }]
        ]
    };
    var points = [];

    for (var i = 0; i < polylineData.paths[0].length; i++) {
        var lat = polylineData.paths[0][i].lat;
        var lng = polylineData.paths[0][i].lng;
        var p = new google.maps.LatLng(lat, lng);
        points.push(p);
        bounds.extend(p);
    }
    var poly = new google.maps.Polyline({
        // style here
        path: points,
        strokeColor: "#FF0000", //seems to save over the previous colour for each line
        strokeOpacity: 0.5,
        strokeWeight: 4
    });
    playVideo(poly, video, map); // Click event function.
    poly.setMap(map);
    map.fitBounds(bounds);

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

function playVideo(poly, video, map) {
    google.maps.event.addListener(poly, 'click', function (h) {

        document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src="' + video + '" frameborder="0" allowfullscreen></iframe>';
    });
}