“无法读取未定义的属性'zindex'谷歌地图

我想使用API将自定义控件添加到Google地图。我已经有两个自定义控件添加，他们工作得很好。我试图复制和粘贴第三个控件的代码（当然要更改相关变量），并且不断收到上述错误（标题中）。“无法读取未定义的属性'zindex'谷歌地图

Chrome控制台和Firebug似乎没有指出一个特定的问题（它破坏了谷歌地图API代码）。通过逐步注释掉线，我已经将范围缩小到这一行：

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);

添加控制完整的代码如下：

function ChurchControl(churchControlDiv, map) { 
churchControlDiv.style.padding = '5px 0px'; 
var churchControlUI = document.createElement('DIV'); 
churchControlUI.style.backgroundColor = 'white'; 
churchControlUI.style.borderStyle = 'solid'; 
churchControlUI.style.borderWidth = '1px'; 
churchControlUI.style.borderColor = 'gray'; 
churchControlUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px'; 
churchControlUI.style.cursor = 'pointer'; 
churchControlUI.style.textAlign = 'center'; 
churchControlUI.title = 'Click to see Churches'; 
churchControlDiv.appendChild(churchControlUI); 
var churchControlText = document.createElement('DIV'); 
churchControlText.style.fontFamily = 'Arial,sans-serif'; 
churchControlText.style.fontSize = '13px'; 
churchControlText.style.padding = '1px 6px'; 
churchControlText.style.fontWeight = 'bold'; 
churchControlText.innerHTML = 'Churches<br>แสดงจำนวนคริสเตียน'; 
churchControlUI.appendChild(churchControlText); 

google.maps.event.addDomListener(churchControlUI, 'click', function() { 
    toggle(churches); 
    if (churchControlText.style.fontWeight == 'bold') { 
     churchControlText.style.fontWeight = 'normal'; 
    } else { 
     churchControlText.style.fontWeight = 'bold'; 
    } 
}); 

google.maps.event.addDomListener(churchControlUI, 'mouseover', function() { 
    churchControlUI.style.backgroundColor = '#e8e8e8'; 
}); 

google.maps.event.addDomListener(churchControlUI, 'mouseout', function() { 
    churchControlUI.style.backgroundColor = 'white'; 
}); 
} 

function initialize(){ 
    map = new google.maps.Map(document.getElementById("map_canvas"), { 
    center: centerLatLng, 
    zoom: 7, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var churchControlDiv = document.createElement('DIV'); 
    var churchControlDiv = new ChurchControl(churchControlDiv, map); 
    churchControlDiv.index = 3; 
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv); 
}

任何想法？为什么有3个控件会有什么问题？

来源

2012-04-20 Josh

我跟着the tutorial，这非常接近你的代码。

此行接近尾声需要改变

var churchControlDiv = new ChurchControl(churchControlDiv, map);

更换churchControlDiv与churchControl或其他名称，因为churchControlDiv不应被覆盖。

看到这里http://jsfiddle.net/FTjnE/2/

我画我的变化与//CHANGED的点击一个警报，新的地图中心

来源

2012-04-20 13:59:35

就是这样。谢谢。当我经历并更改变量时，我必须将其改变为错误的变量。很长一段时间看着这个... – Josh 2012-04-22 04:06:06

我有同样的错误弹出我的控制台上，而下面的教程出于不同的原因。

而不是使用默认的JavaScript DOM操作，我一直在使用jQuery来创建我的元素，例如，

var controlDiv = $('<div></div>'); 
    var controlUI = $('<div class="alert alert-info"></div>'); 
    controlDiv.append(controlUI); 
    var controlText = $('<div>Control text here</div>'); 
    controlUI.append(controlText);

这样做是好的，只要你给DOM节点地图末，用controlUI[0]或controlUI.get(0)，像这样的（而不是jQuery的元素！）：

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);

另请参阅：
How to get the native DOM element from a jQuery object - jQuery FAQ

来源

2013-04-26 10:41:41 yochannah

“无法读取未定义的属性'zindex'谷歌地图

回答

相关问题