div中调用javascript函数

我遵循Google Map API教程here，特别是JAVASCRIPT + HTML版本。我相信相关的部分将是div中调用javascript函数

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

来源

2015-12-23 user2857014

而实际上，你在任何地方调用'initMap'功能？ – adeneo

@adeneo我意识到我其实不是......但是当我按照教程

这只是显示地图。这是如何工作的？ – user2857014

您是否检查过引导元素上的CSS？这可能是因为您意外地获得了0高度并需要设置特定的尺寸。查看浏览器工具中的元素应该会显示地图是否实际存在并且不可见。 –

变化

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 
    }); 
}())

来源

2015-12-23 08:19:23

div中调用javascript函数

回答

相关问题