title: Show context menu on-click (marker)
body: <p>I have this code for <strong>context menu</strong> and it's working fine</p>
  
  <pre><code>google.maps.event.addListener(map, 'rightclick', function(e)
  {
      // start buy hiding the context menu if its open
      contextMenu.hide();
  
      var mapDiv = $(map.getDiv()),
          x = e.pixel.x,
          y = e.pixel.y;
  
      // save the clicked location
      clickedLatLng = e.latLng;
  
      // adjust if clicked to close to the edge of the map
      if ( x &gt; mapDiv.width() - contextMenu.width() )
          x -= contextMenu.width();
  
      if ( y &gt; mapDiv.height() - contextMenu.height() )
          y -= contextMenu.height();
  
      // Set the location and fade in the context menu
      contextMenu.css({ top: y, left: x }).fadeIn(100);
  });
  </code></pre>
  
  <p>My question is why this isn't working, the same thing but click is now <strong>startMarker</strong> *<em>click</em>*?</p>
  
  <pre><code>google.maps.event.addListener(startMarker, 'click', function(e) {
              // start buy hiding the context menu if its open
              contextMenu.hide();
  
              var mapDiv = $(map.getDiv()),
                  x = e.pixel.x,
                  y = e.pixel.y;
  
              // save the clicked location
              clickedLatLng = e.latLng;
  
              // adjust if clicked to close to the edge of the map
              if ( x &gt; mapDiv.width() - contextMenu.width() )
                  x -= contextMenu.width();
  
              if ( y &gt; mapDiv.height() - contextMenu.height() )
                  y -= contextMenu.height();
  
              // Set the location and fade in the context menu
              contextMenu.css({ top: y, left: x }).fadeIn(100);
            });
  </code></pre>
  
  <p>And the rest of the code</p>
  
  <pre><code>// Create the context menu element
  var contextMenu = $(document.createElement('ul')).attr('id', 'contextMenu');
  
  // Fill our context menu with links
  contextMenu.append(
      '&lt;li&gt;&lt;a href=\"#startMenu\"&gt;Start&lt;/a&gt;&lt;/li&gt;' +
      '&lt;li&gt;&lt;a href=\"#stopMenu\"&gt;End&lt;/a&gt;&lt;/li&gt;'
  );
  
  // Disable the browser context menu on our context menu
  contextMenu.bind('contextmenu', function() { return false; });
  
  // Append it to the map object
  $(map.getDiv()).append(contextMenu);
  
  
  // Set some events on the context menu links
  contextMenu.find('a').click( function()
  {
      // fade out the menu
      contextMenu.fadeOut(75);
  
      // The link's href minus the #
      var action = $(this).attr('href').substr(1);
  
      switch (action) {
          case 'startMenu':
              $.get('something1.php', method1);
              break;
  
          case 'stopMenu':
              $.get('something2.php', method2);   
              break;
      }
  
      return false;
  });
  </code></pre>