簡単なチップスですが、前回の記事 「田園調布は思っていたより大きく、しかも昭和に取り残された街だった」 を書くのに田園調布の地図に丁目を重ねた地図が欲しかったのですが、適当なものがネット上で発見出来なかったので、自分で作る事にしました。 方法のいろいろ 一番簡単なのは、Google マップで目的の地図を表示し画面をキャプチャーした画像の上に何らかのツールを使い画像を書いてしまう事です。がこれは 利用規約 的にはダメそうです。 Google Maps API ポリゴンを画く 機能がります。地図をバックに適当なツールでポリゴンを書き、座標を緯度経度に変換できれば、JSを使い地図を拡大・縮小、移動できるマップが表示できますが、いろいろ面倒そうです・・・ そこで今回は、Google Maps API を使い地図を表示し、CSSで画像を上に乗せる方法にしました。表示用のHTML(JS)は以下のように