JSFiddle - React, Tailwind, and code Playground

by falldeaf

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        float:right;
        height: 100%;
        width: 70%;
      }
  
      
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <div id="map"></div>
    <script>
    
      function initMap() {
        
        var imgpath = 'https://www.tcpalmextras.com/tcpalm_hosted/images/brandyhallmap/';
      
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 28.0344621, lng: -80.58866460000002},
          
        });

        var contentString1 = `
        This is a test marker<br/>
        <b> TEST </b>
        `;
        var infowindow1 = new google.maps.InfoWindow({
          content: contentString1
        });
        var marker1 = new google.maps.Marker({
          position: {lat: 28.1491056, lng: -80.6063611},
          map: map,
          icon: imgpath + 'helmet.svg',
          title: 'Mather\'s Bridge'
        });
        //var link1 = document.getElementById("mbridge");
				marker1.addListener('click', function() {
          infowindow1.open(map, marker1);
        });

      var link1 = document.getElementById("mbridge");
      link1.onclick = function(){
      	google.maps.event.trigger(marker1, 'click');
      };
      

      }
      
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqqZoEoekIWyFgxZIHohDs3EX4nX0XEto&callback=initMap">
    </script>
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqqZoEoekIWyFgxZIHohDs3EX4nX0XEto&callback=initPano"
        async defer>-->
    </script>
  </body>
</html>