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>

<div id="sidebar"> 
  
</div>

<div id="toggleDetails"> 
</div>

CSS

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

#map {
  background: #58B;
  float: right;
  position: absolute;
  left: 150px;
  top:0px;
}

#sidebar {
  float: left;
  width: 150px;
}

#toggleDetails {
  width: 150px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -150px;
  background-color: white;
 -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease; 
}

#toggleDetails.active {
  left: 0px;
}

JavaScript

$("button").click(function(){
        $("#toggleDetails").removeClass("active");
});

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){
            return function () {
            	var result = "  <button>close</button><p>"+ e.name +"</p><p>" + e.latitude+"</p><p>"+ e.longitude+ "</p>";
               
              $("#toggleDetails").html(result);
              $("#toggleDetails").addClass("active"); 
            }
          })(arrayList[i])
        });
}

$('button').live('click',function() {
        $("#toggleDetails").removeClass("active"); 
        return false;
});