CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
wayfare
wayfare

Reputation: 709

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>

Upvotes: 27

Views: 69312

Answers (7)

Ezra Siton
Ezra Siton

Reputation: 7781

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

Upvotes: 0

Amir Md Amiruzzaman
Amir Md Amiruzzaman

Reputation: 2079

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

marker.setVisible(false); // hide the marker

Upvotes: 3

Liam McArthur
Liam McArthur

Reputation: 1033

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!

Upvotes: 3

Ben Regenspan
Ben Regenspan

Reputation: 10548

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

Upvotes: 67

chuck w
chuck w

Reputation: 1761

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.

Upvotes: 2

Anthony Shaw
Anthony Shaw

Reputation: 8166

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?

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

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

Upvotes: 1

Related Questions