javascript - 我的 javascript 适用于 google maps API 吗？

Question

我正在使用 squarespace 构建我的网站，并希望从 google maps javascript api 插入自定义 map 。我已经按照 W3school 和 Google 自己的教程构建我的 map 并按照以下步骤操作:

我要存档的是这样的 map google map example

第 1 步:插入 html 的嵌入 block

<div id= "map"></div>

第二步:在页眉中插入javascript

<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>

<script type="text/javascript">
function initMap() {
  var map = new google.maps.Map(document.getElementById(‘map'), {
    zoom: 12,
    center: {lat: 48.877412, lng: 2.359221},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Define the LatLng coordinates for the polygon's path.
  var 10th = [
    {lat: 48.883863,  lng: 2.349500},
    {lat: 48.870752,  lng: 2.347915},
    {lat: 48.867593,  lng: 2.363981},
    {lat: 48.872958,  lng: 2.377065},
    {lat: 48.877800,  lng: 2.370605},
    {lat: 48.882765,  lng: 2.370164},
    {lat: 48.884218,  lng: 2.368480},
    {lat: 48.884670,  lng: 2.360258},
    {lat: 48.883863,  lng: 2.349500}
  ];

  // Construct the polygon.
  var 10th = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  10th.setMap(map);

}
</script>

第 3 步:在自定义 css 部分

#googleMap {
width: 100%;
height: 380px;
}    

但到目前为止，我得到的要么是注入(inject) javascript 后的空白页面，要么是错误页面(代码在页面顶部可见...)

这是我在 SquareSpace 上的网页的链接 https://handa-cheng-a3wm.squarespace.com/1starrondissement

谢谢!

Answer 1

您的代码中有几个拼写错误:

var 10th = [...]  // invalid variable name
    ^---

JavaScript 中的变量名不能以数字开头。您已经定义了函数但没有运行它。

您还没有在 css 中为 #map 设置高度。

<div id= "map"></div>

#googleMap { // <== this is not correct id as used in html above
  width: 100%;
  height: 380px;
}

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 48.877412, lng: 2.359221},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Define the LatLng coordinates for the polygon's path.
  var points = [
    {lat: 48.883863,  lng: 2.349500},
    {lat: 48.870752,  lng: 2.347915},
    {lat: 48.867593,  lng: 2.363981},
    {lat: 48.872958,  lng: 2.377065},
    {lat: 48.877800,  lng: 2.370605},
    {lat: 48.882765,  lng: 2.370164},
    {lat: 48.884218,  lng: 2.368480},
    {lat: 48.884670,  lng: 2.360258},
    {lat: 48.883863,  lng: 2.349500}
  ];

  // Construct the polygon.
  var polygon = new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  polygon.setMap(map);

}

 initMap();

#map {
  height: 300px;
}

<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<div id="map"></div>