Search code examples
google-maps-api-3google-maps-markersgoogle-street-view

I want to hide map markers while in street view. (Google maps v3)


When a user drags the little yellow man onto the screen, it transitions into a full screen street view. This is good. However, it also litters the screen with my map markers. This is bad.

The hard way of solving this is for me to loop through every possible marker I could have on the map, storing which were visible before street view was initiated, and then restoring them when street view is done. But I can't find a street view initiation event anywhere in the API documentation.

The better and easier solution would be to set some option like "Don't show my markers while in street view."

Edit: managed to find a way to monitor the state of street view. How to detect enter and exit streetView in Google Maps API v3

However, I'd still like to know if there's a way to just... not show markers when in street view.

Final edit: I'm including the 'solution'. This is a simplified version of what I ended up writing, because the layers each touch various modules throughout the application, so they aren't as simply handled as is shown. Final solution:

// Add listener for when we go into street view.
  google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
    var setAllMap = function (mapObjects, state) {
      for (var i = 0, len = mapObjects.length; i < len; i++) {
        mapObjects[i].setMap(state);
      }
    };

    // If street view was just activated
    if (this.getVisible()) {
      // hide everything
      setAllMap(LayerOne, null);
      setAllMap(LayerTwo, null);
      setAllMap(LayerThree, null);

    // If we're leaving street view
    } else {
      // show the marker layers that were on

      setAllMap(LayerTwo, true);
      setAllMap(LayerThree, true);

      // If visibility state was true
      if (LayerOne.getVisible()) {
        setAllMap(LayerOne, true);
      }

      if (LayerTwo.getVisible()) {
        setAllMap(LayerTwo, true);
      }

      if (LayerThree.getVisible()) {
        setAllMap(LayerThree, true);
      }
    }
  });

Solution

  • Using the listener in the answer you posted, see when street view is active and do setAllMap(null); to hide the markers. When it leaves street view, do setAllMap(map); to show the markers again.

    Edit (from the Google Maps documentation):

    function setAllMap(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
    }