title: Trigger event with infoWindow or InfoBox on click Google Map API V3
body: <p>I want to know how to trigger an event when I click on an infoWindow using Google Maps API v3.  In this example, when I click on a marker, an info window shows up with a unique message, based on which marker I clicked.  I want to also be able to click the info window and have an alert show up that says</p>
  
  <blockquote>
    <p>"You clicked on the infowindow for (<strong>__<em>fill in blank location</em>_</strong>)</p>
  </blockquote>
  
  <p>I found some examples using Google Maps API v2 and jQuery, but not with just plain old Google Maps API v3. </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery mobile with Google maps - Google maps jQuery plugin&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=en"&gt; &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      var cityList = [
      ['Chicago', 41.850033, -87.6500523, 1],
      ['Illinois', 40.797177,-89.406738, 2]
      ];
  
      var demoCenter = new google.maps.LatLng(41,-87);
  
      var map;
      function initialize()
      {
          map = new google.maps.Map(document.getElementById('map_canvas'), {
              zoom: 7,
              center: demoCenter,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          addMarkers();
      }
  
      function addMarkers()
      {
          var marker, i;
          var infowindow = new google.maps.InfoWindow();
          for (i = 0; i &lt; cityList.length; i++)
          {
              marker = new google.maps.Marker({
                  position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                  map: map,
                  title: cityList[i][0]
              });
  
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  var contentString = '&lt;div id="infoWindow"&gt;'
                      +'&lt;div id="bodyContent"&gt;'
                      +'&lt;p&gt;'
                      + "This location is:&lt;br&gt;"
                      + marker.title
                      +'&lt;/p&gt;'
                      +'&lt;/div&gt;'
                      + '&lt;/div&gt;';
                  return function() {
                      infowindow.setContent(contentString);
                      infowindow.open(map, marker);
                      google.maps.event.addListener(infowindow, 'click', (function(i){
                          alert("You clicked on the infowindow for" + cityList[i][0]);
                      }));
                  }
                  })(marker, i));
              }
          }
  
  &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="initialize()"&gt;
          &lt;div id="basic-map" data-role="page"&gt;
              &lt;div data-role="header"&gt;
                  &lt;h1&gt;&lt;a data-ajax="false" href="/"&gt;jQuery mobile with Google maps v3&lt;/a&gt; examples&lt;/h1&gt;
                  &lt;a data-rel="back"&gt;Back&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;
                  &lt;div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"&gt;
                      &lt;div id="map_canvas" style="height:350px;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update</strong> I ended up figuring this out for InfoBox as well, which is included below in my answer.</p>