Read the documentation or view this example fullscreen.
var panorama; function initMap() { var astorPlace = {lat: 40.729884, lng: -73.990988}; // Set up the map var map = new google.maps.Map(document.getElementById('map'), { center: astorPlace, zoom: 18, streetViewControl: false }); // Set up the markers on the map var cafeMarker = new google.maps.Marker({ position: {lat: 40.730031, lng: -73.991428}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', title: 'Cafe' }); var bankMarker = new google.maps.Marker({ position: {lat: 40.729681, lng: -73.991138}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00', title: 'Bank' }); var busMarker = new google.maps.Marker({ position: {lat: 40.729559, lng: -73.990741}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00', title: 'Bus Stop' }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); panorama.setPosition(astorPlace); panorama.setPov(/** @type {google.maps.StreetViewPov} */({ heading: 265, pitch: 0 })); } function toggleStreetView() { var toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } }
<div id="floating-panel"> <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input> </div> <div id="map"></div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
#floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; }
#floating-panel { margin-left: -100px; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Overlays Within Street View</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; } </style> </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input> </div> <div id="map"></div> <script> var panorama; function initMap() { var astorPlace = {lat: 40.729884, lng: -73.990988}; // Set up the map var map = new google.maps.Map(document.getElementById('map'), { center: astorPlace, zoom: 18, streetViewControl: false }); // Set up the markers on the map var cafeMarker = new google.maps.Marker({ position: {lat: 40.730031, lng: -73.991428}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', title: 'Cafe' }); var bankMarker = new google.maps.Marker({ position: {lat: 40.729681, lng: -73.991138}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00', title: 'Bank' }); var busMarker = new google.maps.Marker({ position: {lat: 40.729559, lng: -73.990741}, map: map, icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00', title: 'Bus Stop' }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); panorama.setPosition(astorPlace); panorama.setPov(/** @type {google.maps.StreetViewPov} */({ heading: 265, pitch: 0 })); } function toggleStreetView() { var toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>