基于Squarespace的Google

Question

我正在使用Squarespace来构建我的网站，并希望从google地图中插入一个自定义地图javascript。我已经得到了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上的网页

您的网站名称

谢谢！！

Answer 1

LoL，我觉得你把剧本放错地方了。

第一个。把你的脚本，全部放在</body>之后

第二名。您需要为您的地图提供一个封面，<div>就像一个包装器，把它放在中间。使用盖/包装div，您可以操纵大小和形状。

3.我不知道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。

我只将ID名从“'gmap_canvas‘map_canvas”改为“map_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-画布放入包装器中。在预览您的站点时，您是否能够通过检查视图找到您的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-画布放在包装器中，也没有在定制的CSS中包含任何内容。

我制作了一个快速的虚拟站点，复制了你的地图显示失败，但我不太清楚地说出原因。我从复制我的代码开始，看看它是否适用于您--看起来最大的区别在于您在画布上的包装。