javascript - Squarespace 上的 Google map API

Question

我正在使用 Squarespace 构建我的网站，并希望从 google maps javascript api 插入自定义 map 。我已经获得了 google api key 。

我已按照以下步骤操作:

我要存档的只是为了在我的网站上显示谷歌地图。

第 1 步:插入 html 的嵌入 block

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

第二步:在页眉中插入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

谢谢!!

Answer 1

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

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

第二。您的 map 需要封面 <div>像 wrapper 一样把它放在中间。并使用封面/包装 div，您可以操纵大小和形状。

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

更简单的方法:http://embedgooglemaps.com/en/ 也许它会有所帮助。 :)