APIを使用しているSquarespaceで働くGoogle Street Viewの例はありますか？

Question

APIを使用しているSquarespaceで働くGoogle Street Viewの例はありますか？

私はGoogleマップ（非ストリートビュー）を表示するために他の例を使用することができましたが、Googleのストリートビューexampleが動作するようにしようとすると...何もありません。ここで

は私の試みです：私は私のページのヘッダコードインジェクション

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

にこのコードを持っており、 http://keweenaw.squarespace.com/googlemapsapitest

このページのコードブロック内：

<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. APIをHTTP Sでロードしていますが、サイトはHTTPです。 Squarespaceサイトでenable SSLのいずれかを、またはAPIのURLをhttp://maps.googleapis.com/maps/...etcに変更する必要があります。前者が好まれる可能性が高い。

ブラウザのコンソール（F12）を開くと、特定のエラーメッセージが表示され、1つずつ順番に確認できます。

正しいトラックに戻ってくるには、次のコードをページ上のコードブロックに置き、マップを表示します。 CSSを使って幅と高さを調整することができます。いったん動作させると、あなたはCSSエディタとJavascriptからCode InjectionにCSSを移動して（選択した場合）実験を行うことができます。

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

はまた、それはあなたの現在の構成で動作するように上記のコードは、マップのAPIのためにHTTPを使用していることに注意してください。上記のようにSSLを有効にする場合は、Maps APIのURLをHTTPSに変更する必要があります。

Here is a working example（HTTPSを使用）。この例はすぐに終了します。