Does anyone have examples of Google Street View working on Squarespace using the API?

Question

Does anyone have examples of Google Street View working on Squarespace using the API?

I have been able to use other examples to display google maps (non street view) but when I try to get Google's street view example to work... nothing.

Here is my attempt: http://keweenaw.squarespace.com/googlemapsapitest

I have this code in my page header code injection

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
      }
      #street-view {
        height: 100%;
      }
    </style>

<script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: 37.869260, lng: -122.254811},
              pov: {heading: 165, pitch: 0},
              zoom: 1
            });
      }
    </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize">
    </script>

And this in a code block on the page:

 <div id="street-view""></div>  

Answer 1

You've got a number of issues which, once corrected, do in fact generate a working embedded Google Street View on a test Squarespace account.

1. You have a space at the beginning of your API key, causing it to be invalid.
2. You have an extra set of double quotes on <div id="street-view""></div>
3. Your CSS rule `#street-view {height: 100%;} won't work. Briefly put, you'll have to define a height in pixels, like "400px" or a similar 'fixed' unit.
4. You are loading the API over HTTPS but your site is HTTP. You need to either enable SSL on your Squarespace site or change the API url to http://maps.googleapis.com/maps/...etc. The prior is likely preferred.

By opening your browser's console (F12) you can see the specific error messages and work through them one by one (although, having seen these before certainly makes diagnosis faster).

To get you back on the right track, I would put the following code entirely in a code block on the page, where you want the map to appear. You can adjust width and height via your CSS. Once you get it working, you can experiment (if you choose) with moving your CSS to the CSS Editor and your Javascript to Code Injection.

<div id="street-view"></div>  
<style>
    #street-view {
        height: 400px;
        width: 100%;
    }
</style>
<script>
    var panorama;
    function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
                position: {lat: 37.869260, lng: -122.254811},
                pov: {heading: 165, pitch: 0},
                zoom: 1
            }
        );
    }
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize"></script>

Also, note that the code above is using HTTP for the Maps API so that it will work with your current configuration. If you choose to enable SSL as mentioned, you'll need to change the Maps API url to HTTPS.

Here is a working example, using HTTPS. This example will quit working soon.