[GMaps API v3] カスタムコントロール内の要素にイベントリスナーを設定できない場合の対応

予想外のところで引っかかったので、とりあえずメモ。

Google Maps APIの仕様をよく理解できていないので、なにか勘違いしているのかもしれないのですが、カスタムコントロールで設置した要素にイベントリスナーを設定できずに困りました。

<body>
    <div id="map_canvas"></div>
    <div id="CustomControl_Block">
        <input id="SearchAddress" type="text" placeholder="住所を入力してください"></input><button id="SearchAddressRun">移動</button>
    </div>
</body>

<body>

</div>

</body>

function initialize() {
    var mapDiv = document.getElementById("map_canvas");
    var mapObj = new google.maps.Map(mapDiv, {
            center : new google.maps.LatLng(36.322356, 139.013057),
            zoom : 15,
            mapTypeId : google.maps.MapTypeId.ROADMAP
    });
    
    //カスタムコントロールの設置
    var controlDiv = document.createElement('div');
    var CustomControl_block = document.getElementById("CustomControl_Block");
    controlDiv.appendChild(CustomControl_block);
    mapObj.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);

    //このタイミングだとイベントリスナーを設定できない
    document.getElementById("SearchAddressBtn").addEventListener('click', function() {
        alert(document.getElementById("SearchAddress").value); 
    });
              
}

google.maps.event.addDomListener(window, "load", initialize);

function initialize() {

var mapDiv = document.getElementById("map_canvas");

var mapObj = new google.maps.Map(mapDiv, {

center : new google.maps.LatLng(36.322356, 139.013057),

zoom : 15,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//カスタムコントロールの設置

var controlDiv = document.createElement('div');

var CustomControl_block = document.getElementById("CustomControl_Block");

controlDiv.appendChild(CustomControl_block);

mapObj.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);

//このタイミングだとイベントリスナーを設定できない

document.getElementById("SearchAddressBtn").addEventListener('click', function() {

alert(document.getElementById("SearchAddress").value);

});

}

google.maps.event.addDomListener(window, "load", initialize);

これだと、ボタンを押しても何も反応しない orz
どうも、div要素が取得されカスタムコントロールとして配置されるまでの間にgetElementByIdでアクセスできないタイミングがあり、このままではイベントリスナーの設置ができないっぽいです。
とりあえず、カスタムコントロールに指定した要素にアクセスできるようになるまで待ってからイベントリスナーを設置するようにしたら解決しました。

    //カスタムコントロールが表示されるまで待つ   
    !(function waiteCustomContorlDisplayed(){
           setTimeout(function(){
               //フォーム要素にアクセスできるかチェック
               if(document.getElementById("CustomControl_Block")){
                   
                   //カスタムコントロール要素にアクセスできるようになってからイベントリスナーを設定                
                    document.getElementById("SearchAddressBtn").addEventListener("click", function(){
                        alert(document.getElementById("SearchAddress").value);     
                    });
                   
               }else{
                   waiteCustomContorlDisplayed(); //アクセスできるまでループ
               }
           }, 500);
       })();

//カスタムコントロールが表示されるまで待つ

!(function waiteCustomContorlDisplayed(){

setTimeout(function(){

//フォーム要素にアクセスできるかチェック

if(document.getElementById("CustomControl_Block")){

//カスタムコントロール要素にアクセスできるようになってからイベントリスナーを設定

document.getElementById("SearchAddressBtn").addEventListener("click", function(){

alert(document.getElementById("SearchAddress").value);

});

}else{

waiteCustomContorlDisplayed(); //アクセスできるまでループ

}

}, 500);

})();

example

投稿者: shimizu