CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3maps
hitautodestruct
hitautodestruct

Reputation: 20830

How do I make a custom close button for google maps api v3 street view?

I'm trying to customize that terribly small close button in google maps api street view mode:

Street view close button

How do I customize the street view close button?

Upvotes: 6

Views: 7446

Answers (1)

hitautodestruct
hitautodestruct

Reputation: 20830

Reference

I found this reference in google groups explaining how to push a dom object into a street map view.

Custom Javascript Code

I then did some custom coding and this is what I came up with:

window.addEventListener('DOMContentLoaded', function( e ){

    // Get close button and insert it into streetView
    // #button can be anyt dom element
    var closeButton = document.querySelector('#button'),
        controlPosition = google.maps.ControlPosition.RIGHT_TOP;

    // Assumes map has been initiated 
    var streetView = map.getStreetView();

    // Hide useless and tiny default close button
    streetView.setOptions({ enableCloseButton: false });

    // Add to street view
    streetView.controls[ controlPosition ].push( closeButton );

    // Listen for click event on custom button
    // Can also be $(document).on('click') if using jQuery
    google.maps.event.addDomListener(closeButton, 'click', function(){
        streetView.setVisible(false);
    });

});

HTML

<button id="button" class="btn">&times;</button>

CSS

.btn {
    margin-right: 10px;
    font-size: 2em;
    padding: .2em .4em;
    font-family: sans-serif;
    background-color: white;
}

Demo

Heres the full demo on jsbin (hint: drop the street view guy onto the map).

Upvotes: 18

Related Questions