Google地图未加载到js标签中 [英] Google maps not loading within js tab
问题描述
请查看： http://dev.ateo.dk/officelab-konferencecenter/
顶部（Billeder和kort）是使用js制作的。
如果我进入名为kort的点按，Google地图将无法完全加载 - 但是如果我右键单击并使用firefox选择检查元素（Q），则映射将突然加载。
此外，地图不居中。在具体位置 - 位置在左上角。
您可能会在标签div下面看到一个空白的方块。这是与js选项卡中使用的完全相同的代码。如果我在js选项卡中注释，则空白的正方形将正常工作。所以这似乎似乎js标签与js的谷歌地图结合不起作用。可以这样吗？如果是这样，它如何修复？
下面我将显示将初始化谷歌地图和页面上的点击的代码： / p>
if（$（'body.single-konferencested'）。length> 0）
{
突片（）;
}
if（$（'body.single-konferencested'）。length> 0）
{
$（document）.ready（function（） {
function initialize（）{
var myLatlng = new google.maps.LatLng（place_lat，place_lng）;
var mapOptions = {
zoom：9，
center ：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（'gmap'），mapOptions）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
clickable：true
}）;
var pinIcon = new google.maps.MarkerImage（
http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png，
null， / * size在运行时确定* /
null，/ * origin为0,0 * /
null，/ *锚点是缩放图像的底部中心* /
new google.maps.Size（24，40）
）;
marker.setIcon（pinIcon）;
var content_string ='< div id =gmap_info>'+
'< div id =siteNotice>'+
'< / div> ;'+
'< h3 id =firstHeadingclass =firstHeading>'+ place_title +'< / h3>'+
'< div id =bodyContent> +
'< p>'+ place_address +'< br />'+ place_city_zip +'< / div>'+
'< / div>
var infowindow = new google.maps.InfoWindow（{
content：content_string
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
}）;
}
以下是显示Kort选项卡的DOM的html： / p>
< div class =tabContentid =kortstyle =padding：5px 10px;>
< h2> Kort< / h2>
< div id =gmapstyle =width：600px; height：400px;>< / div>
< h2> test< / h2>
< / div>
最好的问候
Patrick
如果地图将要生成的div在页面加载时不可见，则地图将无法正确加载。一旦div进入视图，你应该调整大小。
google.maps.event.trigger（map，'resize' ）;
您应该将其绑定到地图标签的首次点击。
看起来地图已经从当前的第二个标签中注释掉了。如果你可以取消注释，这将更容易帮助你更具体！
编辑：
绑定一次功能，尝试这个：
var tab = jQuery（'ul＃tabs li'）[1]
jQuery（tab）.one（'click' （）{
google.maps.event.trigger（map，'resize'）;
}）;
为了使resize工作，您需要从init函数访问map变量。
如果您放置一个类，也可以更容易地选择正确的选项卡。这将更可靠，然后在标签页中获得第二个li。
编辑2：
尝试在您的初始化代码中添加点击功能。类似于以下
var mapOptions = {
zoom：9，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（'gmap'），mapOptions）;
//在这里添加代码之后，map变量已被实例化
var tab = jQuery（'ul＃tabs li'）[1]
jQuery（tab）。一个（'click'，function（）{
google.maps.event.trigger（map，'resize'）;
//在调整大小之后触发一个中心事件，这也是有用的
//如果绑定到窗口大小
map.setCenter（myLatlng）
}）;
//新代码结束
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
clickable ：true
}）;
I am trying to make tabs using js to have more data on the site.
Please view: http://dev.ateo.dk/officelab-konferencecenter/
The two tabs at the top ("Billeder" and "kort") are made using js.
If i go into the tap called "kort", the google maps will not load completely - however if i right-click and choose "Inspect Element (Q)" using firefox, the map suddenly loads.
Also, the map is not centered. on the specific location - the location is in the top left corner.
You may notice a blank square below the tab div. This is the exact same code as used within the js tab. If i comment out the in js tab, the square which is blank, will work perfectly. So it somehow seems that the js tab combined with the js google maps are not working. Can this be the case, and if so, how is it fixed?
Below i am showing the code which will init the google maps and the taps on the page:
if($('body.single-konferencested').length > 0)
{
tabs();
}
if($('body.single-konferencested').length > 0)
{
$(document).ready(function() {
function initialize() {
var myLatlng = new google.maps.LatLng(place_lat,place_lng);
var mapOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
clickable : true
});
var pinIcon = new google.maps.MarkerImage(
"http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(24, 40)
);
marker.setIcon(pinIcon);
var content_string = '<div id="gmap_info">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading">'+place_title+'</h3>'+
'<div id="bodyContent">'+
'<p>'+place_address+'<br />'+place_city_zip+'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: content_string
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
}
This following is the html showing the DOM for the "Kort" tab:
<div class="tabContent" id="kort" style="padding: 5px 10px;">
<h2>Kort</h2>
<div id="gmap" style="width: 600px; height: 400px;"></div>
<h2>test</h2>
</div>
Best regards Patrick
If the div in which the map is going to live is not visible on page load the map will not load correctly. You should fire a resize once the div has come into view.
google.maps.event.trigger(map, 'resize');
You should bind this to the first click of the map tab.
It looks like the map is commented out of the second tab currently. If you could uncomment it it would be easier to help you more specifically!
EDIT: to bind the function once, try this:
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
google.maps.event.trigger(map, 'resize');
});
In order for the resize to work you will need access to the map variable from your init function. It would also be easier to select the correct tab if you drop a class on it. That would be more reliable then getting the 2nd li in the tabs ul.
EDIT 2: try adding the click function in your initialize code. Something similar to the following
var mapOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
//add the code here, after the map variable has been instantiated
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
google.maps.event.trigger(map, 'resize');
//fire a center event after the resize, this is also useful
// if bound to a window resize
map.setCenter(myLatlng)
});
//end of new code
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
clickable : true
});
这篇关于Google地图未加载到js标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
