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="float:left; width: 950px; height: 400px; float: left; color:">  </div> 
    <!--<div onclick=scrollToMarker(0)>Pointer 1</div>
  <div onclick=scrollToMarker(1)>Pointer 2</div>
  <div onclick=scrollToMarker(2)>Pointer 3</div>
  <div onclick=scrollToMarker(3)>Pointer 4</div>-->
  <div style="float:left; width:20%; cursor:pointer;" onmouseover="startBounceMarker(1)" onmouseout="stopBounceMarker(1)">Pointer 1</div>
  <div style="float:left; width:20%; cursor:pointer;"  onmouseover="startBounceMarker(2)" onmouseout="stopBounceMarker(2)">Pointer 2</div>
  <div style="float:left; width:20%; cursor:pointer;"  onmouseover="startBounceMarker(3)" onmouseout="stopBounceMarker(3)">Pointer 3</div>
  <div style="float:left; width:20%; cursor:pointer;"  onmouseover="startBounceMarker(4)" onmouseout="stopBounceMarker(4)">Pointer 4</div>

CSS

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

JavaScript

var markers=new Array();
    var map;
   function initialize() {
  var bounceTimer;
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
   suppressMarkers : true
 });
   map = new google.maps.Map(document.getElementById('map-canvas'), {
   zoom:7,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [ { featureType:'water', stylers:[{color:'#46bcec'},{visibility:'on'}] },{ featureType:'landscape', stylers:[{color:'#f2f2f2'}] },{ featureType:'road', stylers: [{saturation:-100},{lightness:45}] },{ featureType:'road.highway', stylers: [{visibility:'simplified'}] },{ featureType:'road.arterial', elementType:'labels.icon', stylers: [{visibility:'off'}] },{ featureType:'administrative', elementType:'labels.text.fill', stylers: [{color:'#444444'}] },{ featureType:'transit', stylers:[{visibility:'off'}] },{ featureType:'poi', stylers:[{visibility:'off'}] }],
        });
  directionsDisplay.setMap(map);
 // directionsDisplay.setPanel(document.getElementById('panel'));
  var waypts = [{location:new google.maps.LatLng(1.28644, 103.84663), stopover:true},   {location:new google.maps.LatLng(1.28627, 103.85927), stopover:true}];
 var request = {
  origin: new google.maps.LatLng(1.30365, 103.85256), 
  destination: new google.maps.LatLng(1.29411, 103.84631),
  waypoints: waypts,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var markerCounter = 1;
    directionsDisplay.setDirections(response);
    // add custom markers
    var route = response.routes[0];
     // start marker
    addMarker(route.legs[0].start_location, markerCounter++);
    // the rest
    for (var i = 0; i < route.legs.length; i++) {
      addMarker(route.legs[i].end_location, markerCounter++);
     }
   }
  });
  function addMarker(position, i) {
   var marker = new google.maps.Marker({
     //...