Gmaps.js test

by Ajay Patel

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;type=.js"></script>
<script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
<div id="mapCanvas"></div>
<h1 id="location">India</h1>

<div class="blist">
    <h3>Rs. 50,00,000/- S.G. Highway, Ahmedabad</h3>
    <p class="address">Ostwal Height, Beverly Park, Mumbai</p>    <p class="tel">020 7806 1000</p>
</div>

CSS

* { font-family:arial,sans-serif; font-size:12px; }
#mapCanvas {
    border: 1px solid #006;
}
.popupText h3 {
    margin: 8px 0 2px 0;
    padding: 3px;
    background-color: #09C;
    color:#FFF;
}
.popupText p {
    
}
h1 { font-size:18px; margin:10px; }
h3 { font-weight:bold; }
.blist { margin:10px; padding:10px; border:1px solid #ddd; }

JavaScript

var map = new GMaps({
    div: '#mapCanvas',
    lat: 0,
    lng: 52,
    zoom: 13,
    width: '400px',
    height: '300px'
});

var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p><p>%3</p></div>';

$(".blist").each(function() {
    var title = $(this).find("h3").text();
    var address = $(this).find("p.address").text();
    var tel = $(this).find("p.tel").text();
    var marker = new google.maps.MarkerImage(
                'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-11addc/shapecolor-dark/shadow-1/border-white/symbolstyle-white/symbolshadowstyle-no/gradient-no/bighouse.png',
                new google.maps.Size(45, 90),                
                new google.maps.Point(0, 0), //origin
                new google.maps.Point(0, 25) //anchor point
            );
    GMaps.geocode({
        address: address,
        callback: function(results, status) {
            if (status == 'OK') {
                var latlng = results[0].geometry.location;
                map.setCenter(latlng.lat(), latlng.lng());              
                map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng(),
                    title: title,
                    icon: marker,
                    infoWindow: {
                        content: popupTemplate.replace('%1',title).replace('%2',address).replace('%3',tel)
                    }
                });
            }
        }
    });
});