JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

var j=0;
      function initialize() {
          var mapOptions = {
              zoom: 4,
              center: new google.maps.LatLng(36.389634, -87.897989),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
          downloadUrl('/echo/xml/', xhrCallback, map);
      }



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


      function xhrCallback(r, //the request
      s, //request-status
      u, //request-url
      m, //map
      c //callback
      ) {
          var events = r.responseXML.getElementsByTagName('event');
          if (!m.markers) {
              //here we store the markers
              m.markers = {};
              
          }
          //will be used later to remove markers which will not exist in the XML
          var keys=Object.keys(m.markers);
          
          for (var i = 0; i < events.length; ++i) {
              //the current XML-node
              var event = events[i],
                  position = new google.maps.LatLng(event.getAttribute('lat'),
                  event.getAttribute('lng')),
                  hash = position.toString(),
                  content = '<h2>' + event.getAttribute('name') + '</h2>' + event.firstChild.data;

              //when the hash doesn't exist in m.markers 
              if (!m.markers[hash]) {
                  //create a new marker & infobubble
                  m.markers[hash] = new google.maps.Marker({
                      map: m,
                      position: position,
                      bubble: new InfoBubble({
                          content: content
                      })
                  });

                  google.maps.event.addListener(m.markers[hash], 'click', function () {

                      this.bubble.open(this.getMap(), this)
                  });
                  google.maps.event.trigger(m.markers[hash], 'click');

        ...