GoogleStreetView.html

﻿<!DOCTYPE html>
<html>
<head>
  <title>Google Street View</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <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;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var panorama;

    function initMap() {
      // Note: constructed panorama objects have visible: true
      // set by default.
      panorama = new google.maps.StreetViewPanorama(
        document.getElementById('map'), {
          position: { lat: 42.345573, lng: -71.098326 },
          addressControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
          },
          linksControl: false,
          panControl: false,
          enableCloseButton: false
        });
    }

    function setPano(lat, lon) {
      latLng = new google.maps.LatLng(lat, lon)
      panorama.setPosition(latLng);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.53&callback=initMap"
          async defer></script>
</body>
</html>