jQuery GMAP3 wrapper - on click info windows

I'm using the jQuery GMAP 3 wrapper for the first time on a project. All going quite well - but can't find an example of how to add an infobubble to a marker, but have it only appear when the marker is clicked...

The开发者_运维知识库 addMarker function I'm using is:

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage(\"../../a/img/find-a-ground/markers/marker.png\", new google.maps.Size(40, 40))
      }
   }
});

Can anyone give an example of how to add an infoWindow which only displays when the marker is clicked?

Thanks, Steve

You should add event listener to marker:

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40))
      },
      events: {
        // add events here
        click: function(marker, event, data) { infoWindowOpen($this, marker, data) },
      },
      // also you can add marker-depending-data to fill info window content
      data: "hello! i am infowindow!"
    }
});

// global variable to store google InfoWindow object
// (I assume that you have only one info window)
var infoWindow = null;

function infoWindowOpen($this, marker, data) {
    if (infoWindow) {
        var map = $this.gmap3('get'); // returns google Map object
        infoWindow.open(map, marker);
    } else {
        // create info window above marker
        $this.gmap3({action: 'addInfoWindow', anchor: marker});
        // get google InfoWindow object 
        infoWindow = $this.gmap3({action:'get', name:'infoWindow'});
    }
    infoWindow.setContent(data);
}

May be this will help you.

var toAddress = "1071 SW 101ST,Hollywood,FL,33025";
var infoWinMsg = "this is a sample address";

function setMarkerObject(toAddress, infoWinMsg) {
  $this.gmap3({
    action: 'addMarker',
    address: toAddress,
    marker: {
      options: {
        icon: new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40)),
        draggable: false
      },
      events: {
        mouseover: function (marker, event) {
          $(this).gmap3({
            action: 'addinfowindow',
            anchor: marker,
            options: {
              content: infoWinMsg
            }
          });
        },
        mouseout: function () {
          var infowindow = $(this).gmap3({
            action: 'get',
            name: 'infowindow'
          });
          if (infowindow) {
            infowindow.close();
          }
        }
      }
    },
    infowindow: {
      open: false,
      options: {
        content: infoWinMsg
      }
    },
    map: {
      center: true,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    }
  });
}