JSFiddle - React, Tailwind, and code Playground

by Deepak Manwal

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

.infobox {
    border:2px solid black;
    padding:10px;
    background:white;
}

JavaScript

// JSON
var data = JSON.parse('[{"address":"Pashchim Vihar New Delhi","content":"hello world from salisbury","status":"live"}]');

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

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[28.681046,77.108964],
            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="infobox">'+val.content+'</div>',
                                    offset:{
                                        y:-32,
                                        x:12
                                    }
                                }
                            }
                        });
                    }
                }
            }]
        }
    });
});

// Function Clear Markers
function gmap_clear_markers() {
    $('.infobox').each(function() {
        $(this).remove();
    });
}