JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>

<a href="#" onclick='mapDisplay()'>Show Map</a>
<div id="map" style="width:100%; margin-top:10px; margin-bottom:10px;"></div>

JavaScript

function mapDisplay(){	
    var locations =  [[23.862162, 90.400749, "2014-07-21 03:20:32"], [15.88216, 92.480751, "2014-07-21 03:20:32"], [24.852161, 91.450752, "2014-08-04 08:23:42"], [36.782162, 83.380753, "2014-08-06 10:12:10"]];
    //
    if(locations.length > 0)
    {
        $("#map").css({'height': '600px'});
        
        var map = new google.maps.Map(document.getElementById('map'), {
            //zoom: 8,
            //center: new google.maps.LatLng(((locations[0][0]+locations[locations.length-1][0])/2), ((locations[0][1]+locations[locations.length-1][1])/2)),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        var marker, point, travelCoordinates = new Array();
        var bounds = new google.maps.LatLngBounds();
        
        for (var i = 0; i < locations.length; i++) {
            point = new google.maps.LatLng(locations[i][0], locations[i][1]);
            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: locations[i][2]
            });
            
            travelCoordinates[i] = point 
            bounds.extend(marker.position); 
        }
        map.fitBounds(bounds);
        if(map.getZoom()> 10){
            map.setZoom(10);
        }
        
        var travelPath = new google.maps.Polyline({
            path: travelCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        
        travelPath.setMap(map);	
    }
    else
    {
        $("#map").empty();
        $("#map").css({'background-color': '','height': 'auto'});
        $("#map").html("No records found");
    }	
    
}