How to hide Google Maps Api Markers with jQuery

Hello this might be really silly question but I am trying to make markers disappear when they are clicked. The marker is located properly on the map but when I click it, it doesn't do anything. I was wondering why its not working. Thank you!

  <script type="text/javascript" src="jQuery.js"></script>
  <script type="text/javascript">

  $(document).ready(function(){
      var myOptions = {
        center: new google.maps.LatLng(40.1, -88.2),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var myLatlng = new google.maps.LatLng(40.1, -88.2);
      var temp_marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:"Hello World!"
        });

      console.log($(temp_marker));
      console.log(temp_marker);

      //temp_marker.click(function(){$(this).hide();});

      $(temp_marker).click(function(){console.log("click is working"); $(this).hide();});
          });
  </script>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Solution

temp_marker is a Javascript object, not a DOM element. To attach a listener to the marker (the API will handle the specifics of which DOM element to attach to and how), you should use the Google Maps API's own events system like:

  google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
  });

Their documentation: Google Maps Javascript API v3 - Events