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:700px;
}

.infobox {
    border:1px solid #666666;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
    padding:10px;
    background:white;
}

.infobox .name {
    background:#dddddd;
    font-weight:bold;
    text-shadow:0 1px 1px #ffffff;
    width:100%;
    font-size:14px;
    padding:10px 10px;
    margin:-10px;
    display:block;
    border-bottom:1px solid #aaaaaa;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.25), inset 0 2px rgba(255, 255, 255, 0.2), 0 0 10px rgba(0, 204, 153, 0.5);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25), inset 0 2px rgba(255, 255, 255, 0.2), 0 0 10px rgba(0, 204, 153, 0.5);
}

JavaScript

// JSON
var data = JSON.parse('[{"name":"Plains All American","address":"Tampa, CO","content":"hello world from salisbury","status":"Active","location":"Tampa, CO","capacity":"150 Slanderers" },{"name":"Cursory Coders Studio","address":"86000 Poitiers, France","content":"hello world from poitiers","status":"Rushed","location":"Poitiers, FR","capacity":"70 Nerdboxes"},{"name":"Partial Parcels Incorporated","address":"66000 Perpignam, France","content":"hello world from perpignam","status":"Perplexed","location":"Minot, ND","capacity":"29 Knuckleheads"}]');

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

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[46.578498,2.457275],
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            styles: [{"featureType":"administrative","stylers":[{"visibility":"on"}]},{"featureType":"poi","stylers":[{"visibility":"simplified"}]},{"featureType":"road","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","stylers":[{"color":"#354641"},{"lightness":52}]},{"stylers":[{"saturation":-77}]},{"featureType":"road"}]
        }
    }
});

// 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:{
                               ...