title: How to display popover text on click with google maps utility library?
body: <p>I am working on an app which uses google maps to display the location of certain types of crimes that have been committed in a given area. </p>
  
  <p>I wanted to be able to use Font Awesome icons as markers on the map, and I was able to use the google maps utility library (v3) to do this based off of this <a href="https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3">answer</a>. </p>
  
  <p>However, in using this method, specifically the <code>MarkerWithLabel</code> class, I cannot figure out how to properly display the content popover when clicking on my icon markers. I looked through the <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js" rel="nofollow noreferrer">source code</a> for this class but do not see any parameters which allow for this functionality. </p>
  
  <p>I tried to make my Fontawesome Icon markers into buttons which toggle a popover but that did not work and no errors were shown in the console. So I then tried making the icon marker button toggle a modal. However, strangely, I am only able to toggle the modal when I click <em>and</em> drag the icon across the map, rather than simply on click. I would rather not allow the icon markers to be draggable but this is the only way I have been able to figure out how to toggle the modal.</p>
  
  <p>Here is the google maps utility library I am referencing:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And here is my code:</p>
  
  <pre><code>&lt;h1&gt;Safety Map&lt;/h1&gt;
  &lt;div id="map-canvas" class="map"&gt;&lt;/div&gt;
  
  &lt;div class="modal fade modal-small " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;"&gt;
      &lt;div class="modal-dialog modal-sm"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                  &lt;h4 class="modal-title" id="mySmallModalLabel"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt; &lt;!-- .modal-header --&gt;
  
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.&lt;/p&gt;
              &lt;/div&gt; &lt;!-- .modal-body --&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-ar btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-ar btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt; &lt;!-- .modal-footer --&gt;
          &lt;/div&gt; &lt;!-- .modal-content --&gt;
      &lt;/div&gt; &lt;!-- .modal-dialog --&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      function initialize() {
          var crimes = &lt;?php echo json_encode($crimes); ?&gt;;
          var count = crimes.length;
  
          var mapCoordinates = new google.maps.LatLng( 50, 50 );
          var myOptions = {
                              zoom: 14,
                              center: mapCoordinates,
                              mapTypeId: google.maps.MapTypeId.ROADMAP
                          };
  
         var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions );
  
          for(x = 0; x &lt; count; x++)
          {
              var coordinates = new google.maps.LatLng( crimes[x].lat, crimes[x].lng );
              marker = new MarkerWithLabel({
                  title: crimes[x].type, //tooltip
                  draggable: true,       //I'd rather not have this set to true
                  clickable: true,
                  position: coordinates,
                  icon: ' ',
                  map: map,
                  labelContent: '&lt;button type="button" data-toggle="modal" data-target=".modal-small" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"&gt;&lt;/button&gt;',                  
                  labelClass: "labels" // the CSS class for the label
              });
  
              marker.setMap( map );
          }
      }
  
      initialize();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Does anyone know why I cannot toggle the modal on click? Maybe there is a better way to do this? I simply want to be able to display some marker specific text once a user clicks on an icon marker on the map, whether that is with a popover or modal or similar method.</p>