"未定義のzindex 'プロパティを読み取れません" Googleマップ

Question

APIを使用してGoogleマップにカスタムコントロールを追加しようとしています。私はすでに2つのカスタムコントロールが追加されており、うまく動作します。私は3番目のコントロール（もちろん関連する変数を変更する）のコードをコピーして貼り付けようとしましたが、上記のエラーが（タイトルの中で）続きます。

ChromeコンソールとFirebugは、特定の問題（Googleマップの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つのコントロールを持つことが問題になる理由は何ですか？

Answer 1

私はthe tutorialに続き、コードに非常に近いです。

終了間際のこのラインはchurchControlDivが上書きされるべきではありませんので、churchControlか、別の名前でchurchControlDivを置き換え

var churchControlDiv = new ChurchControl(churchControlDiv, map); 

を変更する必要があります。

私は同じエラーが別の理由のためのチュートリアルを次ながら、私のコンソール上にポップアップしていた//CHANGEDクリックのアラート、および新しいマップセンター

Answer 2

と私の変更をマークし、ここでhttp://jsfiddle.net/FTjnE/2/

を参照してください。

デフォルトの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