"Không thể đọc thuộc tính 'zindex' của không xác định" Google maps

Question

Tôi đang cố thêm các điều khiển tùy chỉnh vào bản đồ Google bằng API. Tôi đã có hai điều khiển tùy chỉnh được thêm vào và chúng hoạt động tốt. Tôi đã cố gắng sao chép và dán mã cho điều khiển thứ ba (thay đổi các biến liên quan của khóa học) và tôi tiếp tục nhận được lỗi ở trên (trong tiêu đề).

Bàn điều khiển Chrome và Firebug dường như không trỏ đến một vấn đề cụ thể (nó phá vỡ bên trong mã api bản đồ google). Bởi các đường dần dần nhận xét ra, tôi đã thu hẹp nó xuống dòng này cụ thể:

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

Mã đầy đủ cho việc thêm sự kiểm soát như sau:

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); 
} 

Bất kỳ ý tưởng? Bất kỳ lý do tại sao có 3 điều khiển sẽ là một vấn đề?

Answer 1

Tôi đã theo dõi the tutorial, rất gần với mã của bạn.

Dòng này gần cuối cùng cần phải thay đổi

var churchControlDiv = new ChurchControl(churchControlDiv, map); 

Thay churchControlDiv với churchControl này hay cách khác tên vì churchControlDiv không nên được ghi đè.

Xem ở đây http://jsfiddle.net/FTjnE/2/

tôi đánh dấu sự thay đổi của tôi với //CHANGED một cảnh báo cho các nhấp chuột, và trung tâm bản đồ mới

Answer 2

tôi đã có lỗi tương tự bật lên trên giao diện điều khiển của tôi trong khi sau khi hướng dẫn cho một lý do khác nhau.

Thay vì sử dụng thao tác DOM JavaScript mặc định, tôi đã sử dụng jQuery để tạo các phần tử của tôi, ví dụ:

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); 

Việc làm này là tốt, miễn là bạn cung cấp cho các nút DOM để bản đồ ở cuối, sử dụng controlUI[0] hoặc controlUI.get(0), như thế này (và không phải là yếu tố jQuery!):

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

Xem thêm:
How to get the native DOM element from a jQuery object - jQuery FAQ