0

マーカーを右クリックして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);
          }
        } 

      };
    })();

1 件の回答 1

0

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

var container = document.createElement("div");
container.appendChild(s_btn);
container.appendChild(g_btn);

var infowindow = new google.maps.InfoWindow({
    content: container
});
1
  • 回答ありがとうございます。ボタン自体を追加することはできるのですが、行いたい実装としては、map上のMarkerをクリックするとinfowindowが開き、その中に「出発地に追加」、「到着地に追加」という文章で二つのボタンを作るというものです。ひとつのボタンを追加する記述はネットで見つけられたのですが、二つ以上のものが見つかりません。。。 2018年11月19日 9:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。