Google Maps API on Squarespace

Question

私はSquarespaceを使用してウェブサイトを構築しており、Googleマップjavascript apiからカスタムマップを挿入したいと考えています。私はすでにGoogleのAPIキーを手に入れました。

私は以下のようにステップに従ってきました：

私がアーカイブにしようとしている何が私のウェブ上のGoogleマップを表示することです。

ステップ1：HTMLのための埋め込みブロックを挿入

<div id="map_canvas"></div> 

ステップ2：ページヘッダ内のJavaScriptを挿入

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false"> 
</script> 

<script type="text/javascript"> 
function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

ステップ3：カスタムCSSセクションで

#map_canvas 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 

しかし私がSquarespaceに書いたコードはうまくいかなかった。どうすればいいですか？ここで SquareSpace

Your Site Titleの私のWebページへのリンク

感謝!!

Answer 1

LoL、私は非常に間違った場所にスクリプトを置きます。

1st。あなたのスクリプトを置いて、すべての後に</body>

2nd。地図のカバーが必要です<div>ラッパーなどのように中央に置くのが好きです。カバー/ラッパーdivを使用すると、サイズと形状を操作できます。

3rd。私はid="maps_canvas"を知らない。グーグルから私はこの<div id='gmap_canvas' style='height:100%;width:100%; position:static'>を持っていたので、それはgmap_canvasでした。それをあなたの表紙/ラッパー部門に合うようにスタイルを入れてください。

簡単な方法：http://embedgooglemaps.com/en/ おそらくそれが役に立ちます。 :)

Answer 2

これは私が以下のように自分のコードに変更するものである：

ステップ1：HTML <ためコードブロックを挿入します - それはブロックを埋め込むなかったが、コードブロック。私は前にミスタイプしました。

<div id="mapWrapper"> 
    <div id='gmap_canvas' style='height:100%;width:100%; position:static'> 
    </div> 
</div> 

ステップ2：ページのヘッダーにJavaScriptを挿入します。

私は

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false"> 
</script> 

<script type="text/javascript"> 
function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

'gmap_canvas' から 'map_canvas' からステップ3のみID名を変更：カスタムCSSセクションでは。'map_canvas' 'mapWrapper' へ、その後、別のサイズを設定してから

変更ID名。

#mapWrapper 
     { 
     width: 750px; 
     height: 500px; 
     margin: 0px; 
     padding: 0px 
     } 

私は人々に私にアドバイスしたすべてのものを入れようとしましたが、マップはまだ私のサイトには表示されません。 何か間違っていますか？

Answer 3

my siteと同じことをしました。

私が別にしたことは、＃map-canvasをラッパーの中に入れていないことです。サイトのプレビュー中に、inspectビューでgmap_canvasを見つけることができますか？コンテンツが存在していて、正しく表示されていない可能性があります。

マイコード：

以下はページヘッダコードインジェクションボックスに記載されています。このコードの大きな部分（私はJSを知らないので、どの部分が覚えていないのか）は、ピンをさまざまな画面サイズの中央に置くことです。ページで

<style type="text/css"> 
     html, body, #map-canvas { 
     height: 400px; 
     width 960px; 
     margin: 0; 
     padding: 0;}   

     #banner-area-wrapper { 
     display: none; 
     } 

    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"> 
    </script> 
    <script type="text/javascript"> 
     function detectBrowser() { 
    var useragent = navigator.userAgent; 
    var mapdiv = document.getElementById("map-canvas"); 

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
    mapdiv.style.width = '100%'; 
    mapdiv.style.height = '100%'; 
    } else { 
    mapdiv.style.width = '600px'; 
    mapdiv.style.height = '800px'; 
    } 
} 
     function initialize() { 

var myLatLng = {lat: 39.910073, lng: -82.965509}; 
     var mapOptions = { 
      center: myLatLng, 
      zoom: 14, 
      panControl: false, 
      mapTypeControl: false, 
      zoomControl: true, 
      zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.DEFAULT, 
      position: google.maps.ControlPosition.LEFT_CENTER}, 
      streetViewControl: false 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Opportunity Center' 
    }); 

google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
}); 
     } 

、私はそれに追従して、コードブロックを持っている：私はラッパーの内側に私の＃マップ・キャンバスを入れて、また中には何も含まれていませんでした

<div id="map-canvas" style="width:90%;margin:auto;"></div> 

注意をカスタムCSS。

私は簡単なダミーサイトを作って、地図を表示することに失敗しましたが、正確に理由を言うためにSquarespaceについては十分に分かりません。私は自分のコードをコピーして、それがあなたのために働くかどうかを見ることから始めるでしょう - 大きな違いはキャンバスのラッパーです。