有没有人有谷歌街景使用API在Squarespace上工作的例子?

Question

有没有人有谷歌街景使用API在Squarespace上工作的例子？

我已经能够使用其他示例来显示谷歌地图(非街景(，但是当我尝试让谷歌的街景示例工作时......无。

这是我的尝试： 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%;} 将不起作用。简而言之，您必须以像素为单位定义高度，例如"400px"或类似的"固定"单位。
4. 您正在通过HTTP S加载 API，但您的网站是 HTTP。您需要在Squarespace站点上启用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>

另外，请注意，上面的代码将 HTTP 用于地图 API，以便它适用于您当前的配置。如果选择启用上述 SSL，则需要将地图 API 网址更改为 HTTPS。

这是一个使用 HTTPS 的工作示例。此示例将很快停止工作。