Page Summary
-
This example demonstrates how to display a Street View panorama alongside a map, showcasing the location and viewpoint.
-
The map and Street View are synchronized, with the map reflecting the position and orientation of the Street View.
-
Users can explore the provided code samples in TypeScript, JavaScript, CSS, and HTML to understand the implementation.
-
Links are available to try the sample on JSFiddle or Google Cloud Shell, or to clone and run it locally with Git and Node.js.
This example displays the Street View for a location alongside a map. The map displays the position and point of view shown in the Street View window.
Read the documentation .
TypeScript
function initialize () { const fenway = { lat : 42.345573 , lng : - 71.098326 }; const map = new google . maps . Map ( document . getElementById ( "map" ) as HTMLElement , { center : fenway , zoom : 14 , } ); const panorama = new google . maps . StreetViewPanorama ( document . getElementById ( "pano" ) as HTMLElement , { position : fenway , pov : { heading : 34 , pitch : 10 , }, } ); map . setStreetView ( panorama ); } declare global { interface Window { initialize : () = > void ; } } window . initialize = initialize ;
JavaScript
function initialize () { const fenway = { lat : 42.345573 , lng : - 71.098326 }; const map = new google . maps . Map ( document . getElementById ( "map" ), { center : fenway , zoom : 14 , }); const panorama = new google . maps . StreetViewPanorama ( document . getElementById ( "pano" ), { position : fenway , pov : { heading : 34 , pitch : 10 , }, }, ); map . setStreetView ( panorama ); } window . initialize = initialize ;
CSS
html , body { height : 100 % ; margin : 0 ; padding : 0 ; } # map , # pano { float : left ; height : 100 % ; width : 50 % ; }
HTML
<html> <head> <title>Street View split-map-panes</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="pano"></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=initialize&v=weekly" defer ></script> </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 - b sample - streetview - simple https : //github.com/googlemaps/js-samples.gitcd js - samplesnpm inpm start
Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME
.
git checkout sample - SAMPLE_NAMEnpm inpm start
