自分のWEBサイトに埋め込みたい、「標準マップ以外を使ったGoogleマップ」

Google Maps APIを使うと、自分のサイトにGoogleマップを埋め込んで、しかも位置情報も反映させることが出来る。サイトにオリジナルマップが欲しいと

 思う人は結構いると思うし、特定のエリアを自作のイラストマップを使って散策したいというようなニーズもあるだろう。Google Maps APIのオーバーレイ機能を利用すると、Googleマップ上に意外と簡単に別画像を上乗せすることが出来る。

貼り付ける画像の２隅の座標を指定するだけ

下図はGoogleマップ上に国土地理院の等高線マップを貼り付けた状態。

貼り付けた画像は1000×1000のPNG画像。この画像の左下と右上の隅がGoogleマップ上のどの座標点に位置するかを指定すれば、あとはマップの拡大・縮小に合わせて表示が調整される。

サンプルは微妙にずれてしまったが、貼り付け画像の縮尺を微調整するのを怠ったため。少しの手間をかけて合わせればピッタリいく。