GMAP3 JSON

GMAP3 JSON

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":"Hafta Sokak No:9 GOP 06700 Ankara,"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:[-37.816218,144.964068],
            zoom: 5
        }
    }
});

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

                        gmap_clear_markers();

                        $(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();
    });
}