Question

这个问题已被问过几次，但没有任何回复对我有用。我试图将宽度和高度添加到容器div

<div style="height:900px;width:1024px;"> 
    Mapa
    <div id="map" class="map"></div>
</div>

尝试将domListener事件添加到谷歌地图对象或仅使用jquery document.ready function

google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });

我创建了 Jsfiddle 来表明我的观点，我知道我错过了API密钥，但这似乎不是问题。

我不知道我在这里失踪了什么。有什么想法吗？

我知道我错过了api密钥

代码低于

的代码段

＆＃13;

function initialize(){
    $(".map").each(function(){
        var centerLat = 52.5230809;
        var centerLong = 13.3999976;
        console.log(centerLat);
        console.log(centerLong);
        var centerLatLong = new google.maps.LatLng(centerLat, centerLong);
        var mapOptions = {
          center: { lat: parseFloat(centerLat), lng: parseFloat(centerLong)},
          zoom: 8,
          scrollwheel: false,
          draggable:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        console.log(map);
        var marker = new google.maps.Marker({
            position: centerLatLong,
            map: map
        });
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });

＆＃13;

<div style="height:900px;width:1024px;"> 
    Mapa
    <div id="map" class="map"></div>
</div>

＆＃13;

Answer 1

你应该将css添加到map div。

   <div style="height:900px;width:1024px;"> 
        Mapa
        <div style="height:900px;width:1024px;" id="map" class="map"></div>
    </div>

Answer 2

作为@egvrcn 's answer。但是你为什么要使用.each()？您想使用多个地图？

是吗？

function initialize() {
    $(".map").each(function () {
        var $this = $(this);
        // ...
        var map = new google.maps.Map($this[0], mapOptions);
        // ...
    });
}

不是？，所以只是......

function initialize() {
    // ...
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    // ...
}

Google Maps Api不会将地图显示为div

2 个答案: