How to create a custom close button for google maps api v3 street view?

Question

I am trying to set up this awfully little close button in google maps api street view mode:

How to set up the street close button?

Answer 1

Link

I found this link in google groups explaining how to push the dom object as a street map.

Custom javascript code

Then I did some custom coding, and that 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

Here's the full demo on jsbin ( hint : remove the guy out onto the map).