Google maps markers toggling div with respect to id

Question

i have difficulty in toggling marker in google maps specifically i'm using gmaps.js to open and close div. On "click" function how would i toggle up div open and close. Below is an example interaction that suits me: https://www.google.com/maps/d/viewer?mid=zbteFZbu8JKc.kxnGVlIRxhQI&hl=en

arraylist = {
    name: "Gunung Kinabalu",
    height: 4095,
    latitude: 6.07484,
    longitude: 116.562853,
    location: "Sabah",
    picture: "Gunung Kinabalu.jpg"
 },

map = new GMaps({
        el: '#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].lat,
          lng: arrayList[i].lng,
          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
          }
        });
      }

Answer 1

I don't have sufficient points to comment, so answering here.

If I understood your question right, you wanted to toggle the infoWindow on mouseover and mouseout of a marker. Here is a working fiddle that shows the infoWindow when you hover over a marker, and closes it when you move out of it - http://jsfiddle.net/e52792j5/822/.

Your code has mostly errors in the variable names. You just have to change the variable name from arraylist to arrayList, and since it's an array it should be enclosed within []. Also, the property key is latitude and longtitude in the addMarker function and not lat and lng respectively.

EDIT:

Here's the updated fiddle that toggles a div with the details of the marker clicked - http://jsfiddle.net/e52792j5/940/

The arrayList object within the for loop is not inherited by the click event handler, as the handler gets executed only after the for loop has finished executing. As mentioned in the comments, you'd have to use a closure to access the parent scope variables. To access the arrayList object inside the click handler, you can use a self-invoking anonymous function that binds the value of i with e. Something like this:

click: (function(e){
    return function () {
       alert(e.name);
    }
})(arrayList[i])

To toggle a div with the details of the marker clicked, a combination of CSS transitions and jQuery can be used.

jQuery:

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])

CSS:

#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;
}

Hope this helps.