Gmap3 Showing Marker Click Event

by Tony Miller

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://gmap3.net/js/gmap3-4.1-min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-4.1-min.js"></script>
<div id="map" style="width: 400x; height: 400px"></div>

CSS

#map {
    width: 400px;
    height: 400px;
    border: 1px #000 solid;
}

JavaScript

$(document).ready(function() {
    $('#map').gmap3({
        action: 'init',
        options: {
            center: [46.578498, 2.457275],
            zoom: 5
        }
    }, {
        action: 'addMarkers',
        markers: [
            {
            lat: 48.8620722,
            lng: 2.352047,
            data: 'Paris !'},
        {
            lat: 46.59433,
            lng: 0.342236,
            data: 'Poitiers : great city !'},
        {
            lat: 42.704931,
            lng: 2.894697,
            data: 'Perpignan ! <br> GO USAP !'}
        ],
        marker: {
            options: {
                draggable: false
            },
            events: {
                click: function(marker, event, data) {
                    var map = $(this).gmap3('get'),
                        infowindow = $(this).gmap3({
                            action: 'get',
                            name: 'infowindow'
                        });
                    if (infowindow) {
                        infowindow.open(map, marker);
                        infowindow.setContent(data);
                    } else {
                        $(this).gmap3({
                            action: 'addinfowindow',
                            anchor: marker,
                            options: {
                                content: data
                            }
                        });
                    }
                }
            }
        }
    });
});