[英]Google Maps generates blank grey <div>
I am currently trying to generate several Google Map elements on a single page inside a jQuery each()
function. 我目前正在尝试在jQuery
each()
函数内的单个页面上生成多个Google Map元素。 There are several .new-venue-item
elements on the page, and they look like this: 页面上有几个
.new-venue-item
元素,它们看起来像这样:
<div class="new-venue-item">
<div class="image">
<div class="image">
<a href="/venue/8121_the-square-bristol-city-of-bristol" title="Discover more about The Square"><img src="http://static.weddingvenues.com/venues/200x300/Wedding-image-with-logo-rectangular.jpg" class="" width="200" height="300" alt="" title="" item-prop=""></a>
</div>
<div id="map8121" class="map" data-lng="-2.6101986" data-lat="51.4590031">
</div>
<div class="overlay">
<a href="#" class="action-btn btn-wv contact-venue trackit" data-click-type="search-contact" data-venue-id="8121" data-customer-id="4038" data-id="8121">Contact venue</a>
<a href="/venue/8121_the-square-bristol-city-of-bristol/" class="action-btn btn-white trackit" data-click-type="search-map" data-venue-id="8121" data-customer-id="4038">More info</a>
</div>
</div>
<div class="info">
<a href="/venue/8121_the-square-bristol-city-of-bristol" title="Discover more about The Square">The Square</a>
<span class="address"><span class="address"><a href="/p-544/united-kingdom/england/city-of-bristol/bristol/" title="Bristol, City of Bristol">Bristol</a>, <a href="/p-164/united-kingdom/england/city-of-bristol/" title="City of Bristol, England">City of Bristol</a></span></span>
</div>
</div>
And then the jQuery code is: 然后jQuery代码是:
$('.new-venue-item').each(function() {
var $map = $(this).find('.map'),
lat = parseFloat($map.data('lat')),
lng = parseFloat($map.data('lng'));
// Hook up the map:
var mapOptions = {
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
panControl: false,
zoomControl: false,
draggable: false,
zoomLevel: 14,
center: {
lat: lat,
lng: lng
}
};
//new google.maps.Map( document.getElementById('map8160'), mapOptions );
$(this).data('map', new google.maps.Map($map[0], mapOptions));
});
Unfortunately, this generates a blank map element with a grey background. 不幸的是,这会生成一个灰色背景的空白地图元素。 There are no errors in the console, and the Map API is being correctly included.
控制台中没有错误,并且正确地包含了Map API。 Has anyone encountered this issue before, and how might I fix it?
有没有人以前遇到过此问题,我该如何解决?
I have put together a jsFiddle demonstrating the problem. 我已经把一个jsFiddle放在一起展示了这个问题。
In your example zoomLevel
needs to be changed to zoom
which fixes the issue. 在您的示例中,需要将
zoomLevel
更改为zoom
以解决问题。
$('.new-venue-item').each(function() {
var $map = $(this).find('.map'),
lat = parseFloat($map.data('lat')),
lng = parseFloat($map.data('lng'));
// Hook up the map:
var mapOptions = {
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
panControl: false,
zoomControl: false,
draggable: false,
zoom: 14, //Changed from zoomLevel
center: {
lat: lat,
lng: lng
}
};
//new google.maps.Map( document.getElementById('map8160'), mapOptions );
$(this).data('map', new google.maps.Map($map[0], mapOptions));
});
It took me a while to figure out 我花了一段时间才弄明白
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.