GoogleマップのDOMイベントが応答しない

Question

Googleは、マップ上にカスタム凡例を作成する方法のいくつかの例を提供しました。ここにコードがあります。

var legend = document.createElement('div'); 
legend.id = 'legend'; 
var content = []; 
content.push('<h3><b>View option</b></h3>'); 
content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>'); 
content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="faculty"></g><g><text x="26" y="10">Faculty</text></g></svg></div>'); 
content.push('<div id="sexDiv"><svg height="20" width="200"><g><rect width="15" height="12"class="sex"></g><g><text x="26" y="10">Sex</text></g></svg></div>'); 
content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="level"></g><g><text x="26" y="10">Level of education</text></g></svg></div>'); 

legend.innerHTML = content.join(''); 
legend.index = 1; 
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); 

私はグーグルからも、このコードを使用して、（ユーザーがクリックした伝説に基づいたデータを表示する）という伝説がインタラクティブにしようとしています。

var sexOpt = document.getElementById("sexDiv"); 

google.maps.event.addDomListener(sexOpt, 'click', function() { 
    window.alert('Sex was clicked!'); /*just to test*/ 
}); 

しかし、それは聞こえません。以前は、クラスとIDの名前が似ていたので、それは紛争（明らかにそれがない）でもあると思っていましたが、それでも聞こえません。

Answer 1

document.getElementById("sexDiv")を実行すると、<div id="sex">はDOMに含まれません。 1つのオプションは、アイドルイベントmapを待ってから、そのコードを実行することです。

google.maps.event.addListenerOnce(map, 'idle', function() { 
    var sexOpt = document.getElementById("sexDiv"); 

    google.maps.event.addDomListener(sexOpt, 'click', function() { 
    window.alert('Sex was clicked!'); /*just to test*/ 
    }); 
}); 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var legend = document.createElement('div'); 
 
    legend.style.backgroundColor = 'white'; 
 
    legend.style.padding = '5px'; 
 
    legend.id = 'legend'; 
 
    var content = []; 
 
    content.push('<h3><b>View option</b></h3>'); 
 
    content.push('<div id="general"><svg height="20" width="200"><g><rect width="15" height="12"class="general" ></g><g><text x="26" y="10">General</text></g></svg></div>'); 
 
    content.push('<div id="faculty"><svg height="20" width="200"><g><rect width="15" height="12"class="faculty"></g><g><text x="26" y="10">Faculty</text></g></svg></div>'); 
 
    content.push('<div id="sexDiv"><svg height="20" width="200"><g><rect width="15" height="12"class="sex"></g><g><text x="26" y="10">Sex</text></g></svg></div>'); 
 
    content.push('<div id="level"><svg height="20" width="200"><g><rect width="15" height="12"class="level"></g><g><text x="26" y="10">Level of education</text></g></svg></div>'); 
 

 
    legend.innerHTML = content.join(''); 
 
    legend.index = 1; 
 
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); 
 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 
    var sexOpt = document.getElementById("sexDiv"); 
 

 
    google.maps.event.addDomListener(sexOpt, 'click', function() { 
 
     window.alert('Sex was clicked!'); /*just to test*/ 
 
    }); 
 
    var genOpt = document.getElementById("general"); 
 

 
    google.maps.event.addDomListener(genOpt, 'click', function() { 
 
     window.alert('General was clicked!'); /*just to test*/ 
 
    }); 
 
    var facultyOpt = document.getElementById("faculty"); 
 

 
    google.maps.event.addDomListener(facultyOpt, 'click', function() { 
 
     window.alert('Faculty was clicked!'); /*just to test*/ 
 
    }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>