有沒有人有使用API​​在Squarespace上工作的谷歌街景示例？

Question

有沒有人有使用API​​在Squarespace上工作的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街景視圖。

1. 您在API密鑰的開頭有一個空格，導致該密鑰無效。
2. 你有一套額外的雙引號<div id="street-view""></div>
3. 你的CSS規則`＃street-view {height：100％;}將不起作用。簡而言之，您必須以像素爲單位定義高度，例如「400px」或類似的「固定」單位。
4. 您正在通過HTTP加載API S但您的網站是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> 

另外請注意，上面的代碼是使用HTTP的地圖API，使其與您當前的配置工作。如果您選擇按照提及啓用SSL，則需要將Maps API網址更改爲HTTPS。

Here is a working example，使用HTTPS。這個例子很快就會停止工作。