Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 

like image 859
wayfare Avatar asked Mar 07 '12 00:03

wayfare


People also ask

How do I hide labels on Google Maps?

Find the “Layers” menu in the bottom left corner of the screen. Hover your cursor over the box and wait until more options appear. Click “More” to open the Map Details menu. Under “Map Type,” you'll see a checked box next to “Labels.” Uncheck it to remove all labels.

How do I remove pins from Google Maps?

If you want to remove the pin from Google Maps, simply right click on it and select "Remove this destination." Poof, it's gone.


1 Answers

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

like image 198
Ben Regenspan Avatar answered Sep 28 '22 03:09

Ben Regenspan