JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=en" type="text/javascript"></script>
    <script type="text/javascript" >
     var macDoList=[{lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}];function Gmap3Menu($div){var that=this,items=[],ts=null,namespace="gmap3-menu";function create(item){var $item=$("<div class='item "+item.cl+"'>"+item.label+"</div>");$item.click(function(){if(typeof item.fnc==="function"){item.fnc.apply($(this),[]);}}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});return $item;};function clearTs(){if(ts){clearTimeout(ts);ts=null;}}
function initTs(t){ts=setTimeout(function(){that.close()},t);}
this.add=function(label,cl,fnc){items.push({label:label,fnc:fnc,cl:cl});};this.open=function(event){this.close();var offset={x:0,y:0},$menu=$("<div id='"+namespace+"'></div>");$.each(items,function(i,item){$menu.append(create(item));});$menu.hover(function(){clearTs();},function(){initTs(3000);});if(event.pixel.y+$menu.height()>$div.height()){offset.y=-$menu.height();}
if(event.pixel.x+$menu.width()>$div.width()){offset.x=-$menu.width();}
$div.gmap3({overlay:{latLng:event.latLng,options:{content:$menu,offset:offset},tag:namespace}});initTs(5000);};this.close=function(){clearTs();$div.gmap3({clear:{name:"overlay",tag:namespace}});};}
      
      
      
      /*!
 *  GMAP3 Plugin for JQuery
 *  Version   : 5.1.1
 *  Date      : 2013-05-25
 *  Licence   : GPL v3 : http://www.gnu.org/licenses/gpl.html
 *  Author    : DEMONTE Jean-Baptiste
 *  Contact   : [email protected]
 *  Web site  : http://gmap3.net
 *
 *  Copyright (c) 2010-2012 Jean-Baptiste DEMONTE
 *  All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *   - Redistributions of...

CSS

.close{
    color:red;
    cursor: pointer;
    float: right;

   }
      


div.syntaxhighlighter{max-height:500px}.googlemap{height:500px}.cluster{color:#FFF;text-align:center;font-family:Verdana;font-size:14px;font-weight:bold;text-shadow:0 0 2px #000;-moz-text-shadow:0 0 2px #000;-webkit-text-shadow:0 0 2px #000}.cluster-1{background:url(http://gmap3.net/skin/gmap/js/lib/gmap3-images/m1.png) no-repeat;line-height:50px;width:50px;height:40px}.cluster-2{background:url(http://gmap3.net/skin/gmap/js/lib/gmap3-images/m2.png) no-repeat;line-height:53px;width:60px;height:48px}.cluster-3{background:url(http://gmap3.net/skin/gmap/js/lib/gmap3-images/m3.png) no-repeat;line-height:66px;width:70px;height:56px}.infobulle{overflow:hidden;cursor:default;clear:both;position:relative;height:34px;padding:0pt;background-color:rgb(57, 57, 57);border-radius:4px 4px;-moz-border-radius:4px 4px;-webkit-border-radius:4px 4px;border:1px
solid #2C2C2C}.infobulle
.bg{font-size:1px;height:16px;border:0px;width:100%;padding:0px;margin:0px;background-color:#5E5E5E}.infobulle
.text{color:#FFF;font-family:Verdana;font-size:11px;font-weight:bold;line-height:25px;padding:4px
20px;text-shadow:0 -1px 0 #000;white-space:nowrap;margin-top:-17px}.infobulle.drive
.text{background:url(http://gmap3.net/skin/gmap/js/lib/gmap3-images/drive.png) no-repeat 2px center;padding:4px
20px 4px 36px}.arrow{position:absolute;left:45px;height:0pt;width:0pt;margin-left:0pt;border-width:10px 10px 0pt 0pt;border-color:#2C2C2C transparent transparent;border-style:solid}#gmap3-menu{background-color:#FFF;width:170px;padding:0px;border:1px;cursor:pointer;border-left:1px solid #ccc;border-top:1px solid #ccc;border-right:1px solid #676767;border-bottom:1px solid #676767}#gmap3-menu
.item{font-family:arial,helvetica,sans-serif;font-size:12px;text-align:left;line-height:30px;border-left:0px;border-top:0px;border-right:0px;padding-left:30px;background-repeat:no-repeat;background-position:4px...

JavaScript

$("#test").gmap3({
  map:{
    options: {
      center:[46.578498,2.457275],
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  },
  marker: {
    values: macDoList,
    cluster:{
      radius:100,
      // This style will be used for clusters with more than 0 markers
      0: {
        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
        width: 53,
        height: 52
      },
      // This style will be used for clusters with more than 20 markers
      20: {
        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
        width: 56,
        height: 55
      },
      // This style will be used for clusters with more than 50 markers
      50: {
        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
        width: 66,
        height: 65
      }
    },
    options: {
      icon: new google.maps.MarkerImage("https://maps.gstatic.com/mapfiles/icon_green.png")
    },
    events:{
      click: function(marker, event, context){
        $(this).gmap3(
          {clear:"overlay"},
          {
          overlay:{
            latLng: marker.getPosition(),
            options:{
              content:  "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
              "<div class='close'>X</div>" +
                          "<div class='bg'></div>" +
                          "<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
                        "</div>" +
                        "<div class='arrow'></div>",
              offset: {
                x:-46,
                y:-73
              }
            }
          }
        });
      },
    }
  }
});


 $(".close").click(function() {
                  console.log("ok");
                   $( ".infobulle" ).hide();
                   
                });