ホームページ制作を請け負ったクライアントからgoogle mapsを使った地図表示を行いたいという依頼を受けた。
地図内には多数のポイントを表示し、その情報については今後も更新されるため、緯度経度情報やそれに付随する住所、名称などはXMLファイルとして外部に保存し、javascriptを使って制御する方法を採用した。
ポイントをクリックして吹き出しを表示し、その吹き出し内には名称、写真、住所を表示するといった制御を行う。
また、描画される地図の範囲外であってもXMLに記載があればマーカーを描画する方法で、地図のドラッグ移動、もとくは縮小表示された場合には範囲外のそれらのマーカーも表示されることとなる。
どのような記述すればどのように表示され、どのように動作するのかを確認するためサンプルを作ってみた。(あくまでもプログラム制御のサンプルであり、実際の名称および写真、住所とは異なります。)
まずはMaps API keyを申請して、取得する。設置するドメインを申請しなくてはならないため、他のドメインに設置する場合は別途API keyを申請する必要がある。
API keyの取得方法については詳しいサイトがあるのでそちらを参考にしていただきたい。
緯度経度情報の取得するには以下のサイトから取得した。
http://www.geocoding.jp/
で、一番気になる商用利用についてのルールですが、これについては
誰もがGoogle Mapsを公開しているページにアクセスできることを無償利用の条件としているようです。
・特定の人でしかGoogle Mapsを公開しているページにアクセス出来ない。
・一部の人しかアクセス出来ないサーバでGoogle Mapsを公開している。
といった利用方法が商用利用の範囲となるようです。
以下にサンプルを示す。(あくまでもプログラム制御のサンプルであり、実際の名称および写真、住所とは異なります。)
まずは簡単に表示してみる。
マーカーの色を変更する。
(マーカーは自サーバに保存しておいた方が良いと思うのでこちらからダウンロードしてください)
マーカー自体をプログラムで作ってしまう方法。その1
マーカー自体をプログラムで作ってしまう方法。その2
(外部ファイルmapiconmaker.jsが必要となります)
googleの詳細説明はこちら
googleのライブラリはこちら
ウィザードはこちら
Google Maps APIを使っていちばんやりたかったこと。ちょっとプログラムが煩雑になってしまった。
このプログラムについてのお問い合わせはこちらから