有没有人使用API​​在Squarespace上使用Google街景的示例？

Question

有没有人使用API​​在Squarespace上使用Google街景视图？

我已经能够使用其他示例来显示谷歌地图（非街景），但是当我试图让谷歌的街景example工作......没有。

这是我的尝试： http://keweenaw.squarespace.com/googlemapsapitest

我的页面标题代码注入中有此代码

<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>

这是在页面上的代码块中：

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

Answer 1

您已经解决了许多问题，这些问题一旦得到纠正，实际上会在测试Squarespace帐户上生成有效的嵌入式Google街景视图。

1. 您在API密钥的开头有一个空格，导致它无效。
2. <div id="street-view""></div>
上有一套额外的双引号
3. 您的CSS规则`＃street-view {height：100％;}无法正常工作。简而言之，您必须以像素为单位定义高度，例如＆＃34; 400px＆＃34;或类似的“固定”＃39;单元。
4. 您正在通过HTTP S 加载API，但您的站点是HTTP。您需要在Squarespace网站上enable SSL或将API网址更改为http://maps.googleapis.com/maps/...etc。事先可能是首选。

通过打开浏览器的控制台（F12），您可以看到特定的错误消息，并逐一进行处理（尽管在看到这些之前肯定会使诊断更快）。

为了让您回到正确的轨道，我会将以下代码完全放在页面上的代码块中，您希望地图显示在该代码块中。您可以通过CSS调整宽度和高度。一旦你开始工作，你可以尝试（如果你选择）将CSS移动到CSS编辑器和你的Javascript到代码注入。

<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>

另请注意，上面的代码使用的是Maps API的HTTP，以便它可以与您当前的配置一起使用。如果您选择启用上述SSL，则需要将Maps API网址更改为HTTPS。

Here is a working example，使用HTTPS。这个例子很快就会退出。