jQuery GMAP3 wrapper - on click info windows

Question

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

Answer 1

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