Overlays within Street View

by Alexis Evertt López Espinoza

HTML

<button id="foo">Toggle</button>
<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjFxNO6O7ofDbBVXp0UKTY1xVhKc4Av48&callback=initMap">
</script>

CSS

#map{
    width: 75%;
    height: 250px;
}

JavaScript

var panorama;

function initMap() {
    var libertyStatue = {lat: 40.689249, lng: -74.044499},
		map = new google.maps.Map(document.getElementById('map'), {
        center: libertyStatue,
        zoom: 18,
        streetViewControl: false
    });

    panorama = map.getStreetView();
    panorama.setPosition(libertyStatue);
    panorama.setPov(({
        heading: 265,
        pitch: 0
    }));
}

function toggleStreetView() {
    var toggle = panorama.getVisible();
    if (toggle == false) {
        panorama.setVisible(true);
    } else {
        panorama.setVisible(false);
    }
}

$("#foo").on("click", toggleStreetView);