1. Home >
  2. Documentation >
  3. data types >
  4. event
 

event

Events to attach to a google map are stored in events and onces.
All of them use this prototype : function(sender <mixed>, event <js event>, context <object>)

  • sender depend of the action asserted (marker will send a google.maps.Marker, ...)
  • event is the javascript event which trig this function
  • context is an object and includes
    • id {id} Unique ID of the item (user entry)
    • tag {Tag} Tag of the item (user entry)
    • data {mixed} Data of the item (user entry)

In this example, a string is used as custom data for each marker and is displayed when click event is trig on the markers

$("#test").gmap3({
  map:{
    options:{
      center:[46.578498,2.457275],
      zoom: 5
    }
  },
  marker:{
    values:[
      {latLng:[48.8620722, 2.352047], data:"Paris !"},
      {address:"86000 Poitiers, France", data:"Poitiers : great city !"},
      {address:"66000 Perpignan, France", data:"Perpignan ! GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
    ],
    options:{
      draggable: false
    },
    events:{
      mouseover: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker, 
              options:{content: context.data}
            }
          });
        }
      },
      mouseout: function(){
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      }
    }
  }
});
Close