48888


マーカーを右クリックしてinfowindowを表示、その中にボタンを2つ以上作成しそれぞれ別のイベントを行う。というコードを書きたいのですが、方法がわかりません。HTMLを入れた場合onclickの対象がnullという風になってしまいます。よろしくお願いします。

[code]

    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);
              }
            } 
    
          };
        })();
    
[/code]


CC BY-SA 4.0
2018-09-21T07:37:03.490
48616
2018-10-02T02:59:56.703
2018-09-21T07:59:47.777
2238
30195
question
javascript google-maps
infowindowに動的にボタンを2つ以上作る


HTMLも含めた全体のソースが分からないのでInfoWindowに２つのボタンを追加する部分だけですが、以下の方法でどうでしょうか。

[code]

    var container = document.createElement("div");
    container.appendChild(s_btn);
    container.appendChild(g_btn);
    
    var infowindow = new google.maps.InfoWindow({
        content: container
    });
    
[/code]


CC BY-SA 4.0
2018-10-02T02:59:56.703
48888
2018-10-02T02:59:56.703
13314
48616
answer