JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://www.appmalt.info/gmap3.min.js"></script>
<div id='gmap-4' class='gmap3' style='height:600px;width:600px;'></div>

CSS

.masterpin { width: 22px;height: 22px;border-radius:34px 24px 38px 0 / 38px 24px 34px 0;background: #00cae9;position: absolute;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);left: 50%;top: 50%;margin: -12px 0 0 -16px;}
.masterpin:after {content: "";transform:rotate(45deg);-webkit-transform:rotate(45deg);text-align:center;width: 10px;height: 10px;margin: 4px 0px 0 9px;background: white;position: absolute;border-radius: 50%;}

.bounce {animation-name: bounce;animation-fill-mode: both;animation-duration: 1s;-webkit-animation-name: bounce;-webkit-animation-fill-mode: both;-webkit-animation-duration: 1s;}

.pulse {background: black;border-radius: 50%;height: 8px;width: 8px;position: absolute;left: 50%;top: 50%;margin: 13px 0px 0px -9px;transform: rotateX(55deg);-webkit-transform: rotateX(55deg);z-index: -2;}
.pulse:after {content: "";border-radius: 50%;height: 39px;width: 37px;position: absolute;margin: -13px 0 0 -13px;animation: pulsate 1s ease-out;-webkit-animation: pulsate 1s ease-out;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;opacity: 0;box-shadow: 0 0 1px 2px #00cae9;animation-delay: 1.1s;-webkit-animation-delay: 1.1s;}

@keyframes pulsate {
  0% {transform: scale(0.1, 0.1);opacity: 0;}
  50% {opacity: 1;}
  100% {transform: scale(1.2, 1.2);opacity: 0;}
}

@-webkit-keyframes pulsate {
  0% {-webkit-transform: scale(0.1, 0.1);opacity: 0;}
  50% {opacity: 1;}
  100% {-webkit-transform: scale(1.2, 1.2);opacity: 0;}
}

@keyframes bounce {
  0% {opacity: 0;transform: translateY(-2000px) rotate(-45deg);}
  60% {opacity: 1;transform: translateY(30px) rotate(-45deg);}
  80% {transform: translateY(-10px) rotate(-45deg);}
  100% {transform: translateY(0) rotate(-45deg);}
}

@-webkit-keyframes bounce {
  0% {opacity: 0;-webkit-transform: translateY(-2000px) rotate(-45deg);}
  60% {opacity: 1;-webkit-transform: translateY(30px)...

JavaScript

$(document).ready(function() {
    var point1 = [29.425705,-98.486075];
	var point2 = [29.426928,-98.437418];
   $('#gmap-4').gmap3({
       marker:{
           //latLng:[0,0]   <--- not necessary anymore
       },
       map:{
           options:{
               center:[29.4401784,-98.4793855],
               zoom:12,
           }
       },
       overlay:{
           values:[
               {
                   latLng:point1,
                   data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
                   options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
               },
               {
                   latLng:point2,
                   data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
                   options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
               }
           ], // here I remove the closed bracket for "overlay"
           
           options:{
               draggable: false,
               
           },
           events:{
               mouseover: function(overlay, event, context){
                   var map = $(this).gmap3("get"),
                       infowindow = $(this).gmap3({get:{name:"infowindow"}});
                   if (infowindow){
                       infowindow.open(map, overlay);
                       infowindow.setContent(context.data);
                   } else {
                       $(this).gmap3({
                           infowindow:{
                               anchor:overlay, 
                               options:{content: context.data}
                           }
                       });
                   }
               },
               mouseout: function(){
                   var infowindow = $(this).gmap3({get:{name:"infowindow"}});
              ...