infowindowに動的にボタンを2つ以上作る
マーカーを右クリックしてinfowindowを表示、その中にボタンを2つ以上作成しそれぞれ別のイベントを行う。というコードを書きたいのですが、方法がわかりません。HTMLを入れた場合onclickの対象がnullという風になってしまいます。よろしくお願いします。
var marker;
var map;
var infowindow;
var getMap = (function() {
function codeAddress(address) {
// google.maps.Geocoder()コンストラクタのインスタンスを生成
var geocoder = new google.maps.Geocoder();
//Mapのオプション
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//make map
map = new google.maps.Map(document.getElementById('map-box'), mapOptions);
// geocoder.geocode()メソッドを実行
geocoder.geocode( { 'address': address}, function(results, status) {
// if success
if (status == google.maps.GeocoderStatus.OK) {
// 変換した緯度・経度情報を地図の中心に表示
map.setCenter(results[0].geometry.location);
//☆表示している地図上の緯度経度
document.getElementById('lat').value=results[0].geometry.location.lat();
document.getElementById('lng').value=results[0].geometry.location.lng();
// Marker設定
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
marker.addListener('rightclick', function(e) {
getRightClickLatLng(e.latLng, marker);
});
function getRightClickLatLng(lat_lng, marker) {
infowindow.open(map, marker);
}
// geocording成功しなかった場合
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
//Mapをクリックで位置変更
map.addListener('click', function(e) {
getClickLatLng(e.latLng, map,marker);
});
function getClickLatLng(lat_lng, map,marker) {
//☆表示している地図上の緯度経度
document.getElementById('lat').value=lat_lng.lat();
document.getElementById('lng').value=lat_lng.lng();
// Marker設置
marker.setMap(null);
marker.position = lat_lng;
marker.setMap(map);
//latlngの中心をずらす
map.panTo(lat_lng);
}
//lat,lngから地図表示
document.getElementById("latlon_button").onclick = function(){
var s_lat = document.getElementById("lat").value;
var s_lng = document.getElementById("lng").value;
/*document.getElementById("form-text").innerHTML = "Pushed"+parseFloat(s_lat);*/
var latlng = {lat: Number(s_lat), lng: Number(s_lng)};
marker.setMap(null);
marker = new google.maps.Marker({
position: latlng,
map: map
});
// 座標の中心をずらす
map.panTo(latlng);
}
var s_btn = document.createElement("button");
s_btn.innerText = "出発地にセット";
google.maps.event.addDomListener(s_btn,"click", function(){
document.getElementById("start_lat").value = document.getElementById("lat").value;
document.getElementById("start_lng").value = document.getElementById("lng").value;
document.getElementById("start-set").innerHTML = "出発地を設定しました。";
});
var g_btn = document.createElement("button");
g_btn.innerText = "到着地にセット";
google.maps.event.addDomListener(g_btn,"click", function(){
document.getElementById("goal_lat").value = document.getElementById("lat").value;
document.getElementById("goal_lng").value = document.getElementById("lng").value;
document.getElementById("goal-set").innerHTML = "到着地を設定しました。";
});
infowindow = new google.maps.InfoWindow({
content:s_btn,//ここに上で作成したs_btnとg_btnを並べたい
size: new google.maps.Size(20, 20)
});
document.getElementById("s_latlng_button").onclick = function(){
document.getElementById("start_lat").value = document.getElementById("lat").value;
document.getElementById("start_lng").value = document.getElementById("lng").value;
document.getElementById("start-set").innerHTML = "出発地を設定しました。";
}
document.getElementById("g_latlng_button").onclick = function(){
document.getElementById("goal_lat").value = document.getElementById("lat").value;
document.getElementById("goal_lng").value = document.getElementById("lng").value;
document.getElementById("goal-set").innerHTML = "到着地を設定しました。";
}
}
//inputのvalueで検索して地図を表示
return {
getAddress: function() {
// buttonに指定したid要素を取得
var button = document.getElementById("map_button");
// buttonを押された時の処理
button.onclick = function() {
// formに入力された住所情報を取得
var address = document.getElementById("address").value;
// 取得した住所を引数に指定してcodeAddress()関数を実行
codeAddress(address);
}
//windowが読み込まれたときに地図を表示
window.onload = function(){
// formに入力された住所情報を取得
var address = document.getElementById("address").value;
// 取得した住所を引数に指定してcodeAddress()関数を実行
codeAddress(address);
}
}
};
})();