gmaps.js console

Play with gmaps.js

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
    display: block;
    width: 100%;
    height: 100%;
}

#map {
    background: #58B;
}

JavaScript

arrayList = [{
    name: "Gunung Kinabalu",
    height: 4095,
    latitude: 4.2062722,
    longitude: 107.9405116,
    location: "Sabah",
    picture: "Gunung Kinabalu.jpg"
 },
 {
 	name: "Gunung Kinabalu2",
    height: 4095,
    latitude: 4.4,
    longitude: 107.9405116,
    location: "Sabah",
    picture: "Gunung Kinabalu.jpg"
}];

map = new GMaps({
        div: '#map',
        lat: 4.2062722,
        lng: 107.9405116,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        minZoom: 6,
        maxZoom: 10,
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false,
 });

for(var i = 0; i < arrayList.length; i++) {
        map.addMarker({
          id : arrayList[i].name,
          lat: arrayList[i].latitude,
          lng: arrayList[i].longitude,
          title: arrayList[i].name,
          infoWindow: {
            content: arrayList[i].name
          },              
          details: {
             name:arrayList[i].name,
             pic:arrayList[i].pic,
             height:arrayList[i].height,
             loc:arrayList[i].loc,
          },
          mouseover: function(e){
            this.infoWindow.open(this.map, this);
          },
          mouseout: function(e){
             this.infoWindow.close(this.map, this);
          },
          click: function(e){
             //here the events to toggle div
          }
        });
}