マーカーをクリックして情報ウィンドウを表示させたい

Question

geojsonのデータからgooglemapに表示されたマーカーをクリックすると、id="form"を情報ウィンドウとして表示させたい。

<div id="form">
    <table>
  <form action="/" method="post"  class="board-form" >
    <tr>
      <td>テキスト</td><td> <textarea type="text" name="name" class="input"  cols="19" rows="10"placeholder="言いたい事を書いて" ></textarea></td>
    </tr>
    <tr>
      <td>タグ</td><td><textarea type="text" name="type" class="input" cols="19" rows="5" placeholder="タグを書いて"></textarea></td> </tr>
    <tr>
      <td></td><td><textarea type="text" name="address" class="input"  cols="19" rows="3"placeholder="写真を送る"></textarea> </td>
    </tr>
      <td></td><td colspan="2"><textarea  id="textoutput_lat" type="text" name="lat" class="input" cols="8" rows="3" placeholder="lat:"></textarea>
                               <textarea  id="textoutput_lng" type="text" name="lng" class="input"  cols="8" rows="3"placeholder="lng:"></textarea>
  <tr><td></td><td><button type="submit" class="submit" value="Save" >送信</button></td></tr>
    </table>

  </form>

参考サイト様より

google.maps.event.addDomListener(window, 'load', function() {
	
	//Google Maps初期化
	var map = new google.maps.Map(document.getElementById('map-canvas'), {
		center: { lat: 36.3894816, lng: 139.0634281 },
		zoom: 12
	});
 
	//GeoJSONデータ読み込み
	d3.json('aed.geojson', function(data) {		
		//データレイヤーに追加
		map.data.addGeoJson(data);
		//イベント(マーカークリック時)を設定
		map.data.addListener('click', mouseClick);
	});
	
	function mouseClick(e) {
		//features->propertiesのaddressデータをクリック時に表示する
		alert(e.feature.getProperty('address'));	
	}
   
});

の

		//イベント(マーカークリック時)を設定
		map.data.addListener('click', mouseClick);

を変えればできそうだと思い以下のように変えてみましたが、できません。

var mark;
     //---
     //GeoJSONデータ読み込み
     //----
     d3.json('./niigata.geojson', function(data){
     //データレイヤーに追加
     mark=map.data.addGeoJson(data);

     infowindow = new google.maps.InfoWindow({//クリックすると吹き出しが作成される
     content: document.getElementById('form')
   });
     map.data.addListener('click', function() { // マーカーをクリックしたとき
     infoWindow.open(map,mark); // 吹き出しの表示
    });

Answer 1

参考サイト様から少し変更いたしましたところ、以下の文で解決できました。

  map.data.addListener('click', function(event) {
      // infowindow は initMap() 内で
      // infowindow = new google.maps.InfoWindow(); として定義
      var description = document.getElementById(form); // infowindow に入れる内容
      infowindow.setContent(description);
      infowindow.setPosition(event.latLng); // ここでinfowindowの位置を指定
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
      infowindow.open(map);
    });