JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<nav>
    Show:
    <a onclick="map.show_markers()">Markers</a>
    <a onclick="map.show_polylines()">Polylines</a>
</nav>
<div id="mapcanvas"></div>

CSS

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

a:hover {
color: #256556    
}

JavaScript

var mapdata = [ { lat : 15, lon : 35 }, { lat : 20, lon : 20 }, { lat : 10, lon : 10 } ];
var markers = [];
var lines = [];

function map() {
    
    // 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 mapcanvas = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
    
    map.clear_all = function() {
        /*
        *    Clear all overlays from map
        */
        while(lines[0]) lines.pop().setMap(null);
        while(markers[0]) markers.pop().setMap(null);
    } 
        
    map.show_markers = function() {
        /*
        *    Show markers on map
        */
        
        map.clear_all(); // First clear the map from existing overlays
    
        for ( var i = 0; i < mapdata.length; i++ ) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapdata[i].lat, mapdata[i].lon),
                map: mapcanvas
            });
            markers.push(marker);
        }
    }

    map.show_polylines = function() {
        /*
        *    Show polylines on map
        */        
        map.clear_all();
        
        for ( var i = 0; i < mapdata.length-1; i++ ) {
            var line = new google.maps.Polyline({
            path: [ 
                new google.maps.LatLng(mapdata[i].lat, mapdata[i].lon),
                new google.maps.LatLng(mapdata[i+1].lat, mapdata[i+1].lon)
                ],
            strokeOpacity: 0.8,
            strokeColor: "#0000FF",
            strokeWeight: 2,
            map: mapcanvas
            });

            lines.push(line);

        }
    }
}

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