Googleマップの利用…ハピネス薬局

Ｇｏｏｇｌｅマップの利用

Googleのマップは目的の場所を表示するだけでなく縮尺を変えたり、周辺へ簡単に移動できたり、
ユーザーが自分の感覚で位置関係を把握できるので大変便利です。

Googleのマップページで住所を入力して地図を表示して使用しますが、この機能は自分のページに取り込むことができます。

広島市薬剤師会のホームページでは、休日当番薬局の地図を表示させるなどの目的でこの機能を利用しています。
（ハピネス薬局を指定して地図を表示させるサンプル）

Ｇｏｏｇｌｅへの登録

Googleマップを利用することは、Google Maps APIを利用することです。
すばらしい機能が無料で使えるわけですが、当然に規約があり、同意した上で登録する必要があります。
規約については、ご自身で確認してください。
（ロゴの表示や将来はコマーシャルも表示されるようになるかもしれません。無料のつらいところです。）

キーを取得するには Googleのアカウントを先に取得する必要があります。
Googleのトップページの右上のログインからでもアカウントを作成できます。メールアドレスを登録します。

次に URL登録ページで Google Maps APIを利用するサイトを登録してAPIキーを取得します。

（Generate API Key をクリックします。）

（キーと使用方法のサンプルが表示されます。）

このキーを指定することで自分のページでGoogle Mapを利用できるようになります。
キーはサイトのURLに対して発行されるので、複数のサイトで利用するにはそれぞれ登録する必要があります。

マイページでの表示

通常のページに表示させるには注意点があります。
Google Maps APIでは文字コードがUTF-8でなければなりませんが、通常のページは charset=Shift-JIS となっていると思います。
そのため、マップを表示させるページを別にする、或いはIFRAMEを利用します。

上記の Googleのサンプルを別ページで表示します。

♦ Google Maps APIの使用方法の解説 ♦ Google Maps APIのクラスリファレンス

広島市薬剤師会で使用したクラス・メソッド・プロパティ
GMap2	addControl	GSmallMapControl	GMapTypeControl	setCenter	addOverlay
GClientGeocoder	GLatLng	GDownloadUrl	GXml.parse	GetGeoPoint	GMarker
GIcon	iconSize	GSize	iconAnchor	infoWindowAnchor	GPoint
image	shadow	shadowSize	openInfoWindowHtml	GEvent	addListener
…など

データの読み込み

Google Maps APIは住所のデータとしてXML形式のデータを読み込むことができます。
広島市薬剤師会では、従来より会員薬局の住所などの情報を管理しています。
このデータを変換するツールを作って  XMLデータを用意し、クリックで指定された薬局の住所をJavaScriptで検索して、
Google Maps APIにそのデータを渡して、動的にマップページを表示しています。

注意点はやはり文字コードです。  XMLファイルもUTF-8でなければなりません。

XMLから取得した住所をマッピングする処理を順次繰り返させると、分布表示が可能となります。
   （住所に「翠」を含む薬局を抽出して地図に表示させるサンプル）
ただし、抽出結果が多い（30件程度？）とエラーが発生するようです。

是非、Googleマップと自分のデータを連動させて、便利な情報をWebで提供してみてください。

ホームへ

当ページに関するご意見・お問合せはこちらへ

Tips