Overlays Within Street ViewStay organized with collectionsSave and categorize content based on your preferences.
AI-generated Key Takeaways
This example demonstrates displaying markers for various points of interest around Astor Place, New York City, on a Google Map.
It features a toggle button that switches to Street View, where the same markers are overlaid on the panoramic imagery.
The code utilizes the Google Maps JavaScript API to create the map, markers, and Street View panorama, along with event listeners for user interaction.
The sample code is provided in both JavaScript and TypeScript, with instructions for running it locally using Git and Node.js or trying it online via JSFiddle and Google Cloud Shell.
This example creates a map that displays markers to denote various locations
around Astor Place, New York City. It includes a toggle to switch to Street
View, where the same markers are visible.
letpanorama:google.maps.StreetViewPanorama;functioninitMap():void{constastorPlace={lat:40.729884,lng:-73.990988};// Set up the mapconstmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:astorPlace,zoom:18,streetViewControl:false,});document.getElementById("toggle")!.addEventListener("click",toggleStreetView);constcafeIcon=document.createElement("img");cafeIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";constdollarIcon=document.createElement("img");dollarIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";constbusIcon=document.createElement("img");busIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";// Set up the markers on the mapconstcafeMarker=newgoogle.maps.Marker({position:{lat:40.730031,lng:-73.991428},map,title:"Cafe",icon:cafeIcon.src,});constbankMarker=newgoogle.maps.Marker({position:{lat:40.729681,lng:-73.991138},map,title:"Bank",icon:dollarIcon.src,});constbusMarker=newgoogle.maps.Marker({position:{lat:40.729559,lng:-73.990741},map,title:"Bus Stop",icon:busIcon.src,});// We get the map's default panorama and set up some defaults.// Note that we don't yet set it visible.panorama=map.getStreetView()!;// TODO fix typepanorama.setPosition(astorPlace);panorama.setPov(/** @type {google.maps.StreetViewPov} */{heading:265,pitch:0,});}functiontoggleStreetView():void{consttoggle=panorama.getVisible();if(toggle==false){panorama.setVisible(true);}else{panorama.setVisible(false);}}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
letpanorama;functioninitMap(){constastorPlace={lat:40.729884,lng:-73.990988};// Set up the mapconstmap=newgoogle.maps.Map(document.getElementById("map"),{center:astorPlace,zoom:18,streetViewControl:false,});document.getElementById("toggle").addEventListener("click",toggleStreetView);constcafeIcon=document.createElement("img");cafeIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";constdollarIcon=document.createElement("img");dollarIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";constbusIcon=document.createElement("img");busIcon.src="https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";// Set up the markers on the mapconstcafeMarker=newgoogle.maps.Marker({position:{lat:40.730031,lng:-73.991428},map,title:"Cafe",icon:cafeIcon.src,});constbankMarker=newgoogle.maps.Marker({position:{lat:40.729681,lng:-73.991138},map,title:"Bank",icon:dollarIcon.src,});constbusMarker=newgoogle.maps.Marker({position:{lat:40.729559,lng:-73.990741},map,title:"Bus Stop",icon:busIcon.src,});// We get the map's default panorama and set up some defaults.// Note that we don't yet set it visible.panorama=map.getStreetView();// TODO fix typepanorama.setPosition(astorPlace);panorama.setPov(/** @type {google.maps.StreetViewPov} */{heading:265,pitch:0,},);}functiontoggleStreetView(){consttoggle=panorama.getVisible();if(toggle==false){panorama.setVisible(true);}else{panorama.setVisible(false);}}window.initMap=initMap;
/** 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:1pxsolid#999;text-align:center;font-family:"Roboto","sans-serif";line-height:30px;padding-left:10px;}#floating-panel{margin-left:-100px;}
<html>
<head>
<title>Overlays Within Street View</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="floating-panel">
<input type="button" value="Toggle Street View" id="toggle" />
</div>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-11-14 UTC."],[],["This code creates a Google Map centered on Astor Place, NYC, with markers for a cafe, bank, and bus stop, each using custom icons. An event listener toggles Street View on and off. The Street View panorama defaults to Astor Place with a set heading and pitch. The CSS styles the map and a floating panel with the toggle button, and the HTML includes the map container, button, and links the CSS and JS files.\n"]]
