Skip to main content
1 / 2

[google maps api]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);
          }
        } 
          
      };
    })();