Question

我正在关注Google Map API教程here，特别是JAVASCRIPT + HTML版本。我相信相关部分将是

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

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

我正在尝试为包含两个流体容器的页面使用bootstrap，其中一个容器将包含地图。我在Bootstrap中关注这个fluid layout example。所以我有类似

的东西

<div class="container-fluid">
  <div class="row-fluid">
<div class="span2">
  {% for q in qs %}
    <p>{{ q.name }} {{ q.address}}</p>
  {% endfor %}
</div>
<div class="span10" id="map"></div>
</div>
</div>

它不显示地图。我想知道是否

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

这是正确的做法，我是否应该改变其他任何事情。

编辑：

<div id="map"></div> <- This works
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2"></div>
    <div class="span10" id="map"></div> <- This doesn't work
  </div>
</div>

Answer 1

更改

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

带

(function () {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}())

在div中调用javascript函数

1 个答案: