Google Maps v3 API + jQuery冲突 [英] Google Maps v3 API + jQuery conflict
问题描述
我正在尝试开发一个位于可扩展div中的商店定位器(使用Google Maps v3 API).但是,该地图未正确显示(请参见下面的链接).我一般来说是jQuery的新手,所以这对我来说有点新.
I'm trying to develop a Store Locator (using Google Maps v3 API), that's located in an expandable div. However, the map is not showing up properly (see link below). I'm a newbie to jQuery in general, so this is all a bit new to me.
我知道这里有冲突.当我删除可扩展div的ready函数时,地图将正确显示.但是那里没有电话.
I know there's a conflict though. As when I remove the ready function for the expandable div, the map will show up properly. But not with the call there.
所有代码都可以在这里找到
All the code can be found here:
http://t-zonevibration.com/expandable_store_locator/
这是jQuery冲突吗?如果是这样,我该如何解决?
Is it a jQuery conflict? If so, how do I fix it?
推荐答案
#map
元素必须在页面中可见...
The #map
element must be visible in the page...
因此您需要将初始化代码放在slideToggle
的回调中.
So you need to put the initialization code in the callback to the slideToggle
.
$(document).ready(function() {
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h9.trigger").click(function() {
$(this).toggleClass("active").next().slideToggle("slow", function() {
if ($(this).is(':visible')) {
map = InitMap(null, 'map', centerCoord, true); // initialize the map on default location
}
});
return false; //Prevent the browser jump to the link anchor
});
handle_clicks(); // click events handling by jQuery
});
在 http://jsfiddle.net/gaby/A5jnV/
这篇关于Google Maps v3 API + jQuery冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!