Login/Register
How to hide Google Maps Api Markers with jQuery
Asked Answered
Solved jquerygoogle-mapsgoogle-maps-api-3
M

7

27

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>

Mignonmignonette answered 7/3, 2012 at 0:35 Comment(0)
P
67

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

Piston answered 7/3, 2012 at 0:42 Comment(4)
does that mean I am not able to apply jQuery to most of Google Maps objects? – Mignonmignonette
@Mignonmignonette the Maps API puts a layer of abstraction in between the DOM elements it creates for the markers and the implementer. There may be tricks to accessing the DOM elements directly, but there aren't supported paths. Any attempt to fiddle with the elements directly would be subject to breakage as soon as Google Maps made an internal change; it also might not work cross-browser. – Piston
If you add the option optimized:false in the marker declaration you can access it by jQuery, but the API resets all the configuration to the default ones as you move the map, zoom in or out, because of this, the best way is to use setVisible, as it will keep that configuration. – Aucoin
Works fine, great job :) – Erector
P
3

Expanding on Ben's notes, this should go where you have declared your marker - for example:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
google.maps.event.addListener(beachMarker, 'click', function() {
  beachMarker.setVisible(false); // maps API hide call
});
}

It's taken me ages trying to figure this out. Huge credit to Ben! Thanks!

Penetrant answered 23/5, 2014 at 14:10 Comment(0)
L
3

You can show a marker by setting the visibility true and hide it by setting the visibility false

marker.setVisible(false); // hide the marker
Laurencelaurene answered 21/6, 2018 at 13:22 Comment(0)
N
2

Ben provided you with half the answer. Once you are able to detect the marker click event you need to "hide" or remove the marker from the map. The standard way for doing this with google maps is to do this:

this.setMap(null);

You can then show the map again be using setMap to assign your map object instead of null.

Nucleolated answered 7/3, 2012 at 17:28 Comment(0)
J
1

marker is a google maps object, not a DOM element. Jquery works on DOM elements.

Jeannettajeannette answered 7/3, 2012 at 0:43 Comment(0)
R
0

I'm not sure that you can just hide the marker, but the appropriate hook for the click event would be to do something like this when you declare marker

google.maps.event.addListener(marker, 'click', function() {
    // do your hide here
});

You may have to remove the marker from the map rather than "hiding" it.

What are you trying to hide the markers for? Do you have to be able to reshow the marker? How do you plan to accomplish this?

Rhapsody answered 7/3, 2012 at 0:48 Comment(0)
L
0

UPDATE for Advanced Markers (Feb 2024)

As of February 21st, 2024 (v3.56), google.maps.Marker is deprecated.

Advanced Markers are the new/improved version of Markers for google maps. https://developers.google.com/maps/documentation/javascript/advanced-markers/overview

Hide

Set marker AdvancedMarkerElement.map property to null.

marker.map = null;

Show

Set marker AdvancedMarkerElement.map property to map.

marker.map = map;

Toggle with some logic

marker.map = zoom > 10 ? map : null;

Related: Conditional (ternary) operator

Hello World Example:

// Initialize and add the map
let map;

async function initMap_AdvancedMarkerElement() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("AdvancedMarker_MAP"), {
    zoom: 4,
    center: myLatLng,
    disableDefaultUI: true, // a way to quickly hide all controls
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: myLatLng,
    title: "Uluru",
  });
  /* HIDE MARKER */
  marker.map = null;
}

initMap_AdvancedMarkerElement();

Google Official Example:
https://developers.google.com/maps/documentation/javascript/advanced-markers/collision-behavior#control_marker_visibility_by_map_zoom_level

Leyva answered 13/3 at 10:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.