比較的簡単にGoogleマップに画像を重ねる

簡単なチップスですが、前回の記事 「田園調布は思っていたより大きく、しかも昭和に取り残された街だった」 を書くのに田園調布の地図に丁目を重ねた地図が欲しかったのですが、適当なものがネット上で発見出来なかったので、自分で作る事にしました。

方法のいろいろ

一番簡単なのは、Google マップで目的の地図を表示し画面をキャプチャーした画像の上に何らかのツールを使い画像を書いてしまう事です。がこれは 利用規約 的にはダメそうです。

Google Maps API ポリゴンを画く 機能がります。地図をバックに適当なツールでポリゴンを書き、座標を緯度経度に変換できれば、JSを使い地図を拡大・縮小、移動できるマップが表示できますが、いろいろ面倒そうです・・・

そこで今回は、Google Maps API を使い地図を表示し、CSSで画像を上に乗せる方法にしました。表示用のHTML(JS)は以下のようになります。 地図の上に乗せているのは画像なので、zoomControl, draggable 等をOFFにしてマップを拡大・縮小、移動出来ないようにしています。

画像の作成には Sketch を使いました、Sketchはベクトルで線やポリゴンが書けるので便利でした。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
#map {
  height: 600px;
  position: relative;
  width: 800px;
}

.maps-frame {
  height: 600px;
  width: 800px;
}

#overlay {
  z-index: 1;
  position: absolute;
}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <img id="overlay" src="denen_area.png" />
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.594828, lng: 139.666311},
          scrollwheel: false,
          zoom: 14,
          streetViewControl: false,
          zoomControl: false,
          mapTypeControl: false,
          draggable: false
         });
      }
      var o = document.getElementById('overlay');
      var b = document.getElementById('map').getBoundingClientRect();
      o.style.left = b.left + "px";
      o.style.top  = b.top + "px";
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=ここに自分のGoogleMapsAPIのkeyを指定して下さい&callback=initMap" async defer>
    </script>
  </body>
</html>

Google Maps API はバージョンがいくつかありネット上には古いバージョンの記事などが多く注意が必要だったので記事にしました。