カスタムコントロール（左上に情報パネル）を追加する

iframeで読み込むマップ（Javascript APIじゃないやつ）では、検索した住所やら店名やらが左上にパネル上で表示されるんですよね。

↑ こんな感じ。

Javascript API ではこんな機能ないし、マーカーの吹き出しよりこっちの方が都合が良い場合が多いけど、HTML と CSS でグリグリやらないと似たようにはできないなぁ……と思ってたら。
意外と普通にできました。

東京タワー
〒105-0011 東京都港区芝公園４丁目２−８
拡大地図を表示

ソースは以下のとおり。

<style>
#map-widget {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  font-size: 12px;
  margin: 10px;
  padding: 9px 4px 9px 11px;
  width: 300px;
}
</style>
<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<div id="map-widget">
  <strong style="font-size:14px">東京タワー</strong><br>
  〒105-0011 東京都港区芝公園４丁目２−８<br>
  <a href="https://goo.gl/maps/Ce9BgR2jcas" target="_blank">拡大地図を表示</a><br>
</div>
<script type="text/javascript">
  function initMap() {
    var myLatlng = {lat: 35.658620, lng: 139.745417};
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 16,
      center: myLatlng,
      mapTypeControlOptions: { //マップタイプコントロールと場所がカブるので、左下に移動
        position: google.maps.ControlPosition.LEFT_BOTTOM,
      },
    });
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
    var widgetDiv = document.getElementById("map-widget");
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>