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>
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.
If you want to remove the pin from Google Maps, simply right click on it and select "Remove this destination." Poof, it's gone.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With