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

Question

我已经能够使用其他示例来显示 google 地图（非街景）但是当我尝试让 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 街景视图。

您的 API 密钥开头有一个 space，导致它无效。
您在 <div id="street-view""></div>
您的 CSS 规则`#street-view {height: 100%;} 将不起作用。简而言之，您必须以像素为单位定义高度，例如“400px”或类似的 'fixed' 单位。
您正在通过 HTTPS 加载 API，但您的站点是 HTTP。您需要在您的 Squarespace 站点上 enable SSL 或将 API url 更改为 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>

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

Here is a working example，使用 HTTPS。这个例子很快就会停止工作。

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

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

api

google-maps

squarespace