JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="//cdn.jsdelivr.net/gmap3/5.1.1/gmap3.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div class="gmap"></div>

CSS

.gmap {
    width:1000px;
    height:800px;
}

body {
    background-color: #eeeeee;
    padding: 1em;
    font-family:helvetica,arial,sans-serif;
}

.chwidget {
  margin: 0 12px 12px 0;
  width: 300px;
  overflow: hidden;
  position: relative;
  display:inline-block;
  background: #fafafa;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.chwidget-heading {
  position: relative;
  z-index: 2;
  padding: 14px 8px;
  height: 24px;
  background: #eee;
  border-radius: 4px 4px 0 0;
  background-image: -webkit-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: -moz-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: -o-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: linear-gradient(to bottom, #eeeeee, #d8d8d8);
  -webkit-box-shadow: inset 0 21px rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 27px rgba(255, 255, 255, 0.22);
}

.chwidget-title {
  float: left;
  line-height: 24px;
  padding: 0 4px;
  font-size: 18px;
  font-weight: bold;
  color: #666666;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

.chwidget-close {
  float: right;
  margin: 0 1px 0 10px;
  padding: 3px 3px 3px 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
}
.chwidget-close:hover {
  border-color: rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
.chwidget-close:active {
  background-color: rgba(0, 0, 0, 0.02);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

.chwidget-toolbar {
  position: relative;
  height: 18px;
  line-height: 18px;
  padding: 6px 0;
  background: #5c5c5c;
  background-image: -webkit-linear-gradient(top, #878787, #5c5c5c);
  background-image: -moz-linear-gradient(top, #878787, #5c5c5c);
  background-image:...

JavaScript

// JSON
var data = JSON.parse('[{"address":"New Street, Salisbury, UK","content":"hello world from salisbury","status":"live"},{"address":"86000 Poitiers, France","content":"hello world from poitiers"},{"address":"66000 Perpignam, France","content":"hello world from perpignam"}]');

var $map = $('.gmap');

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[46.578498,2.457275],
            zoom: 5
        }
    }
});

// Json Loop
$.each(data, function(key, val) {
    $map.gmap3({
        marker:{
            values:[{
                address:val.address,
                events: {
                    click: function(marker, event, context) {

                        gmap_clear_markers();
                        
                         $map.gmap3({
                            map:{
                              options:{
                                center:event.latLng
                              }
                            }
                         });                        

                        $(this).gmap3({
                            overlay:{
                                address:val.address,
                                options:{
                                    content:  '<div class="chwidget"><div class="chwidget-heading"><h3 class="chwidget-title">'+val.content+'</h3><a href="index.html" class="chwidget-close"><span class="icon-close">close</span></a></div><ul class="chwidget-toolbar wecn"><li><a href="index.html">City, ST</a></li><li><span class="badge">2</span></li></ul></div><ul class="ch-features"><li class="featurebox featurebox-active"><span class="featurebox-name">Permian Basin Crude & WTI vs Lighter Crude/Condensate Production</span><p class="featurebox-info">May 18, 2014</p></li></ul>',
                                    offset:{
                                        y:-100,
                                        x:20
                                    }
                                }
   ...