Page Summary
-
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.
Read the documentation .
TypeScript
let panorama : google.maps.StreetViewPanorama ; let innerMap : google.maps.Map ; async function initMap () { // Request needed libraries. const { Map } = ( await google . maps . importLibrary ( 'maps' )) as google . maps . MapsLibrary ; // Set the location of Astor Place. const astorPlace = { lat : 40.729884 , lng : - 73.990988 }; const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; innerMap = mapElement . innerMap ; document . getElementById ( 'streetview-toggle-button' ) ! . addEventListener ( 'click' , toggleStreetView ); const cafeIcon = document . createElement ( 'img' ); cafeIcon . src = new URL ( './public/cafe_icon.svg' , import . meta . url ). href ; const dollarIcon = document . createElement ( 'img' ); dollarIcon . src = new URL ( './public/bank_icon.svg' , import . meta . url ). href ; const busIcon = document . createElement ( 'img' ); busIcon . src = new URL ( './public/bus_icon.svg' , import . meta . url ). href ; // Set up the markers on the map const cafeMarker = new google . maps . Marker ({ position : { lat : 40.730031 , lng : - 73.991428 }, map : innerMap , title : 'Cafe' , icon : cafeIcon.src , }); const bankMarker = new google . maps . Marker ({ position : { lat : 40.729681 , lng : - 73.991138 }, map : innerMap , title : 'Bank' , icon : dollarIcon.src , }); const busMarker = new google . maps . Marker ({ position : { lat : 40.729559 , lng : - 73.990741 }, map : innerMap , 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 = innerMap . getStreetView () ! ; // TODO fix type panorama . setPosition ( astorPlace ); panorama . setPov ( /** @type {google.maps.StreetViewPov} */ { heading : 265 , pitch : 0 , } ); } function toggleStreetView () : void { const toggle = panorama . getVisible (); if ( toggle == false ) { panorama . setVisible ( true ); } else { panorama . setVisible ( false ); } } initMap ();
JavaScript
let panorama ; let innerMap ; async function initMap () { // Request needed libraries. const { Map } = ( await google . maps . importLibrary ( 'maps' )); // Set the location of Astor Place. const astorPlace = { lat : 40.729884 , lng : - 73.990988 }; const mapElement = document . querySelector ( 'gmp-map' ); innerMap = mapElement . innerMap ; document . getElementById ( 'streetview-toggle-button' ) . addEventListener ( 'click' , toggleStreetView ); const cafeIcon = document . createElement ( 'img' ); cafeIcon . src = new URL ( './public/cafe_icon.svg' , import . meta . url ). href ; const dollarIcon = document . createElement ( 'img' ); dollarIcon . src = new URL ( './public/bank_icon.svg' , import . meta . url ). href ; const busIcon = document . createElement ( 'img' ); busIcon . src = new URL ( './public/bus_icon.svg' , import . meta . url ). href ; // Set up the markers on the map const cafeMarker = new google . maps . Marker ({ position : { lat : 40.730031 , lng : - 73.991428 }, map : innerMap , title : 'Cafe' , icon : cafeIcon . src , }); const bankMarker = new google . maps . Marker ({ position : { lat : 40.729681 , lng : - 73.991138 }, map : innerMap , title : 'Bank' , icon : dollarIcon . src , }); const busMarker = new google . maps . Marker ({ position : { lat : 40.729559 , lng : - 73.990741 }, map : innerMap , 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 = innerMap . getStreetView (); // TODO fix type panorama . setPosition ( astorPlace ); panorama . setPov ( /** @type {google.maps.StreetViewPov} */ { heading : 265 , pitch : 0 , }); } function toggleStreetView () { const toggle = panorama . getVisible (); if ( toggle == false ) { panorama . setVisible ( true ); } else { panorama . setVisible ( false ); } } initMap (); export {};
CSS
/* * 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 : 10 px ; left : 25 % ; z-index : 5 ; background-color : #fff ; padding : 5 px ; border : 1 px solid #999 ; text-align : center ; font-family : "Roboto" , "sans-serif" ; line-height : 30 px ; padding-left : 10 px ; } # streetview-toggle-button { height : 40 px ; display : flex ; align-items : center ; justify-content : center ; padding : 0 17 px ; border : none ; background : white ; cursor : pointer ; border-radius : 2 px ; box-shadow : 0 1 px 4 px -1 px rgba ( 0 , 0 , 0 , 0.3 ); margin : 10 px 0 px 10 px -2 px ; font-family : Roboto , Arial , sans-serif ; font-size : 18 px ; font-weight : 400 ; color : rgb ( 86 , 86 , 86 ); } # streetview-toggle-button : hover { background : #f4f4f4 ; color : #000 ; }
HTML
<html> <head> <title>Overlays Within Street View</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18"> <input type="button" value="Toggle Street View" id="streetview-toggle-button" slot="control-block-start-inline-start" /> </gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / streetview - overlaysnpm inpm start
