Squarespace上的Google Maps API

Question

我正在使用Squarespace构建我的网站，并希望从Google Maps 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上的网页链接

您的网站标题

谢谢！！

Answer 1

大声笑，你把剧本放在我认为非常错误的地方。

1号 将您的脚本全部放在</body>

2号 您需要将地图<div>的封面（如包装纸）放在中间。 并使用Cover / wrapper div可以控制尺寸和形状。

第三名 我不知道id="maps_canvas" 。 因为从Google我得到了这个<div id='gmap_canvas' style='height:100%;width:100%; position:static'> <div id='gmap_canvas' style='height:100%;width:100%; position:static'> ，它是gmap_canvas。 并在其中放置样式，以使其适合您的封面/包装div。

更简单的方法： 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。

我只将ID名称从“ map_canvas ”更改为“ gmap_canvas ”

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

步骤3 ：在自定义CSS部分中。

将ID名称从“ map_canvas ”更改为“ mapWrapper ”，然后设置其他大小。

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

我尝试将人们建议的所有内容都放入，但该地图仍未显示在我的网站上。 有什么问题吗？

Answer 3

我对我的网站也做了同样的事情。

我做的不同的是没有将我的＃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>

请注意，我没有将＃map-canvas放入包装器中，也没有在自定义CSS中添加任何内容。

我做了一个快速的虚拟站点，并复制了您无法显示地图的内容，但是我对Squarespace的了解还不够，无法确切地说出原因。 我将从复制代码开始，看看它是否对您有用-似乎最大的区别是您在画布上的包装。