CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Digital Ninja
Digital Ninja

Reputation: 3731

Can I hide Google Maps' default "Exit street view button"?

The Google Maps documentation offers some customization of the StreetViewPanorama. However, what I'm using is the regular Google Maps Map, but with the option to go to Street view, as the StreetViewControl option is on.

Once the user goes into Street View on my Google Maps, the Street View shows default controls: A fullscreen button on the top right, and a back button with the address on the top left. But this is something my users don't quite intuitively understand (and frankly I don't blame them). I need a way to hide those controls, so I can substitute my own buttons.

I am familiar with detecting when a user has entered Street View, and I know how to show a button to have it exit Street View. What I don't know is, can I hide Google's default "back" button? I've tried using the properties of the StreetViewControl object straight into my Map object initialization, but it doesn't work; and understandably so, since some of the option names clash.

Per request, here is the code for showing the map, and showing/hiding my button that exits the Street view:

// Create a map object and specify the DOM element for display.
map = new google.maps.Map(document.getElementById('map'), {
    center: this.mapCenter,
    scrollwheel: true,
    scaleControl: false,
    overviewMapControl: false,
    zoom: this.zoom
});

// Show the button for exiting Street View when Street view is entered
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
    if(this.getVisible() == true) {
        document.getElementById("exitStreetViewButton").style.display = "block";
    } else {
        document.getElementById("exitStreetViewButton").style.display = "none";
    }
});

And this is the code that the Exit button executes to exit the Street View: 

map.getStreetView().setVisible(false);

Upvotes: 2

Views: 2293

Answers (3)

Axel Lohmann
Axel Lohmann

Reputation: 41

You can use this option:

panorama.setOptions(
    {
       enableCloseButton:false
    }
);

Upvotes: 4

Bathmat
Bathmat

Reputation: 663

I just ran into the same problem. Disabling the UI doesn't work, the exit button is the only element (besides the legal stuff at the bottom) still there.

As far as the documentation goes there is no way to remove it. I resorted to hiding it using css:

.gm-iv-container {
    display: none;
}

Upvotes: 2

MrUpsidown
MrUpsidown

Reputation: 22496

Have a look at the StreetViewPanoramaOptions.

Try the disableDefaultUI option. You can set it to true to disable the default UI then enable some controls individually if you need.

var panoramaOptions = {
    disableDefaultUI: true
};

JSFiddle demo

Edit:

If you need you can also do it that way:

var panorama = map.getStreetView();
panorama.setOptions(panoramaOptions);

Upvotes: 0

Related Questions