javascript 谷歌地图没有完全加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3777810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps don't fully load
提问by Maurice
I have a somewhat strange problem. I have two maps on my site, a big one and a small one. I want to use the big one to show a route to a certain address. I'm now trying to implement the two maps but get a weird problem. The small map is working fine, but on the big map only a small area of the div is filled with the map, the rest is empty. (See the image.)
我有一个有点奇怪的问题。我的网站上有两张地图，一张大一张小。我想用大的来显示到某个地址的路线。我现在正在尝试实现这两个地图，但遇到了一个奇怪的问题。小地图工作正常，但在大地图上，只有一小部分 div 被地图填充，其余部分是空的。（见图片。）
I use the following code to display the two maps:
我使用以下代码来显示两个地图：
function initialize() {
var latlng = new google.maps.LatLng(51.92475, 4.38206);
var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
var image = '/Core/Images/Icons/citysquare.png';
var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
marker.setMap(map);
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
jQuery(document).ready(function () {
[..]
initialize();
});
What's going wrong here?
这里出了什么问题？
EDIT:
编辑：
Unfortunately the suggestions below doesn't seem to work. The closes i came is to remove the display:nonefrom the elements and set the elements to hide with jquery
不幸的是，下面的建议似乎不起作用。我来的关闭是从元素中删除display:none并将元素设置为使用 jquery 隐藏
[..]
jQuery(document).ready(function () {
[..]
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide();
});
With the following result
结果如下
采纳答案by Maurice
I fixed it!
我修好了它！
I made an own function for the largemap and placed it in the callback when the elements are opened
我为 largemap 创建了一个自己的函数，并在元素打开时将其放置在回调中
function largeMap(){
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
$("#showRoute").click(function(e){
e.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
$("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
$("#closeBarLink").click(function(l){
l.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
});
largeMap();
});
Thanks anyway!!
不管怎么说，还是要谢谢你！！
回答by Mustafa Magdi
Yes, @Argiropoulos-Stavros but, Add it as a listener
是的，@Argiropoulos-Stavros 但是，将其添加为侦听器
google.maps.event.addListenerOnce(map, 'idle', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(location);
});
It will begin re-sizing after, map rendered.
它将在渲染地图后开始重新调整大小。
回答by Argiropoulos Stavros
回答by Ana El Bembo
call initialize();function after you box active.
initialize();激活框后调用函数。
$(document).ready(function () {
$("#shadow").show(function () {
initialize();
})
});
回答by GKR
When you're loading in the large map, try adding this at the end of your map code.
当您加载大地图时，请尝试将其添加到地图代码的末尾。
map.checkResize();
When Google Maps first renders on your page, it has the dimensions recorded so that it displays the map images in that size. If you're resizing the map dynamically, you need to tell the API to check the new size.
当 Google 地图首次在您的页面上呈现时，它会记录尺寸，以便以该尺寸显示地图图像。如果您要动态调整地图大小，则需要告诉 API 检查新大小。
回答by user2791641
<script type='text/javascript' >
var geocoder, map;
function codeAddress() {
var address= '<?php echo $this->subject()->address; ?>';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon:'http://rvillage.com/application/themes/rvillage/images/map-marker.png'
});
var infowindow = new google.maps.InfoWindow({ content: 'coming soon' });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
}
});
}
jQuery(document).ready(function () {
codeAddress();
});
</script>
回答by Johnny
You are using pop up window with jQuery, and I guest you call initialize()function when document is ready ( $(document).ready(function() {initialize(); })).
Try call initialize()function after pop up windown showed.
您正在使用带有 jQuery 的弹出窗口，我邀请您initialize()在文档准备好时调用函数 ( $(document).ready(function() {initialize(); }))。initialize()弹出窗口显示后尝试调用函数。
Johnny
约翰尼
