AmigoDatabaseカスタマイズノート - Google Maps APIを利用して地図を表示しよう

User Menu

» ログイン » ユーザ登録

はじめに

» AmigoDatabase » カスタマイズの前に » ご利用上のご注意 » 基本トラブルFAQ

カスタマイズノート

サポート

» サポート・ご要望 » ADBファンフォーラム

Google Maps APIを利用して地図を表示しよう

分類：データ表示関連

人気度：

登録住所データからGoogle Maps JavaScript APIをコントロールして地図を表示するようにするモジュールです。ご利用にはMaps API キーをGoogleより取得していなければご利用出来ません。
現在利用出来るMaps APIはJavaScriptタイプのAPIとなります。Gmapモジュール利用時の引数設定にて地図作成における条件（サイズやコントロール種類など）をコントロール出来ます。
AmigoDatabase用として開発しましたが、他の住所を扱うスクリプトでも使用は可能かと存じます。その場合のサポートは行いませんが知識のある方はご自由にご利用下さい。

また地図作成時の右下部に当サイトの著作権リンクが表示されます。この著作権リンクを削除する事、見えなくする事、極端に小さなフォントにする事は禁止させて頂きます。また著作権リンクは目立たないようにしておりますが、サイトデザインにそぐわない場合などはフォントやフォントサイズ、カラー、リンク文字などの調整は許可しますので各自で調整して下さい。リンク文字は最低限「CGI-Search」は残して下さい。

[ コメントを見る ]

対象バージョン及び更新履歴

対象バージョン： ver全バージョン

2009/12/02 ver1.1 JavaScript追加修正とマップタイプ追加
・現行のJavascript onload方法のbodyタグ内onload方法とは別にJavaScriptコード内window.onload方法を追加
・マップタイプに地形を追加

2009/12/01 Gmap module for AmigoDatabase ver1.0 新規配布

カスタマイズ方法

1. Google Maps API

　Google Maps APIを利用するには「Maps API キー」を取得しなければ利用出来ません。
　「Maps API キー」の取得にはGoogleアカウントが必要です。Googleアカウントにログインした状態でGoogle MAPS API に登録するページから「APIキー」を作成して下さい。
　またGoogle Maps APIを利用するに当たってはGoogle Maps 利用規約（英語原文）をご確認の上ご利用頂くようお願いします。
　Google Mapsの定義では「Maps API は、一般の方が使えるよう無料で開放されているサイトであれば、どのようなサイトでも使用できます。」となっていますが、「有料会員しかサイトを利用できない」、「会社内またはイントラネット内でしかサイトにアクセスできない」などの条件ではGoogle Maps API Premierを利用しなければならないとなっております。その他、細かな規定があるようですので、ご自身のウェブサイトがGoogle Maps APIを利用出来るかをよくある質問などを参考にご確認下さい。

2. Gmapモジュールについて

1) はじめに

　GmapモジュールはMaps API Version 2を対象に構成されております。Google Maps APIの更新頻度は高く何らかの更新内容により地図が表示されなくなる可能性もあります。その場合、可能な限り作者は最新の情報に合わせGmapモジュールを更新するように努めますが、必ずしもGmapモジュール更新の責務を負っているものではないとご了承下さい。

2) Maps API Versionへの対応

　Maps APIは現在Version 3がリリースされていますが、Google Mapsの日本語リファレンスが整備されるまではその対応は行わない方針です。また整備されたとしてもその対応時期は未定です。

3) Gmapモジュールのジオコーディング

　GmapモジュールはGoogle Maps API ジオコーディングサービスに GClientGeocoder オブジェクト経由でアクセスしています。（詳細）

3. Gmapモジュール

1) ダウンロード

Gmapモジュールのご利用は本サイトのスクリプト利用規約に無条件で同意したものとします。
アーカイブファイル Gmap_1_1.zip を次のリンクよりダウンロードして下さい。

ダウンロードページ
Gmapモジュール地図表示サンプル

ダウンロード後、アーカイブファイルを解凍して頂くと、Gmap.pm ファイルが梱包されています。

2) ディレクトリの作成

database/modulesディレクトリ

を新規に作成します。パーミッション（「644」又は「604」）はデフォルトのままで結構です。

3) FTPアップロードとパーミッション

前項で作成したmodulesディレクトリへGmap.pmをFTPアップロードします。
パーミッションはデフォルト（「644」又は「604」）のままで結構です。

4. Gmapモジュール利用前準備

1) db-setup.cgiの修正

db-setup.cgiの任意の場所に方に次の記述を追加します。

# ■Google Maps API キー
$APIKey = 'APIキー';
use lib qw(./modules);

$APIKeyはGoogle Mapsから取得したAPIキーを設定します。
use lib は新しく作成したmodulesディレクトリをPerlモジュールディレクトリ@INCに追加します。

5. Gmapモジュールの利用

地図の表示は1ページに一つしか表示できません。よって1データの詳細を表示するデータ詳細ページ(lib/template/data-part/data/default.html)やユーザー詳細ページ(lib/template/data-part/user/default.html)で利用します。

1) Gmapモジュールの基本的な利用方法

use Gmap;
my $Gmap = Gmap->JavaScript({ option });

「option」部分の設定で地図表示の詳細をコントロール出来ます。
この「option」設定をモジュールに送ることで $Gmap 変数に地図を表示するためのJavaScriptコードなどが返されます。なお $Gmap 変数は任意の変数名でも問題ありません。
■「option」設定項目

# Google Maps API キー[必須]
APIKey => $APIKey,
# 住所[必須]
Address => "住所データの変数など",
# マップ横サイズ(単位ピクセル)[必須]
MapWidth => 400,
# マップ縦サイズ(単位ピクセル)[必須]
MapHeight => 300,
# マップ表示縮尺[必須]
MapScale => 16,
# APIバージョン(0=v2/1=v2.x/2=v2.s) ※1
APIVersion => 0,
# JavaScript onload方法(0=body内onload/1=JavaScript内window.onload)
JSOnload => 1,
# マップの枠線の色
MapBorder => 'gray',
# Google マップ上で使用するパン/ズーム コントロール(0=OFF/1=Small/2=Large) ※2
MapControl => 2,
# 地図の縮尺(0=OFF/1=ON) ※2
ScaleControl => 1,
# マップタイプ(地図や航空写真など)をユーザーが切り替えるためのボタン(0=OFF/1=ON) ※2
MapTypeControl => 1,
# マップタイプに地形を追加(0=OFF/1=ON)
# ※MapTypeControlがONでなければ有効になりません
MapTypeControl_PHYSICAL => 1,
# 画面の隅にある最小化可能な全体図(0=OFF/1=ON) ※2
OverviewMapControl => 1,
# マーカーインフォメーション(0=非表示)
MarkerInfo => "ユーザー名などの任意のテキストを表示",

■設定の詳細情報

■$Gmap変数の記述方法
下記の「$Gmap->{JavaScript}」、「$Gmap->{BodyOnload}」、「$Gmap->{MapView}」の3か所の記述は地図を表示するために必須となります。
option設定で「JSOnload => 1,」とした場合には「$Gmap->{BodyOnload}」は不要となります。

<head>～</head>間にJavaScriptコードを記述するための変数
```
<head>
$Gmap->{JavaScript}
</head>
```
option設定で「JSOnload => 0,」とした場合
<body ～>にオンロードを記述するための変数
```
<body$Gmap->{BodyOnload}>
```
option設定で「JSOnload => 1,」とした場合
onload記述不要。次項の「$Gmap->{MapView}」内で「window.onload」として実行されます。

<body>～</body>に地図を表示するための変数
地図を表示したい位置へ記述して下さい。
```
<body>
$Gmap->{MapView}
</body>
```
その他「option」で設定した値も$Gmapに引き継がれています。
```
$Gmap->{APIKey}
$Gmap->{Address}
```
などのようにすれば値を利用出来ます。

2) 具体的な利用

ユーザー詳細ページdefault.htmlで利用した場合の記述
都道府県以外の住所は$VU[$REC{User}{Address2}]にあると仮定します。
option設定で「JSOnload => 1,」とした場合。

use Gmap;
my$Map = Gmap->JavaScript({
APIKey => $APIKey,
Address => "$VU[$REC{User}{Address}]$VU[$REC{User}{Address2}]",
MapWidth => '100%',
MapHeight => 400,
APIVersion => 0,
JSOnload => 1,
MapScale => 16,
MapBorder => '#666666',
MapControl => 2,
ScaleControl => 1,
MapTypeControl => 1,
MapTypeControl_PHYSICAL => 1,
OverviewMapControl => 1,
MarkerInfo => $VU[$REC{User}{Name}] . '<br>' . $VU[$REC{User}{Address}] . $VU[$REC{User}{Address2}],
});

print <<"<!---ＨＴＭＬ--->";
<HTML><HEAD>

～省略～

--></STYLE>
$Map->{JavaScript}
</HEAD><BODY><A name="TOP"></A>
<!---ＨＴＭＬ--->
&_Html_Head;
print <<"<!---ＨＴＭＬ--->";
<TABLE style="font-size : 9pt;" width="100%">

～省略～

<TR bgcolor="#ffffff"><TD>住所</TD><TD>$VU[$REC{User}{Address}]</TD></TR>
<TR bgcolor="#ffffff"><TD>登録日時</TD><TD>$RDate</TD></TR>
<TR bgcolor="#ffffff"><TD>最終更新日時</TD><TD>$NDate</TD></TR>

<tr bgcolor="#ffffff"><td>Google MAP</td><td>$Map->{MapView}</td></tr>

</TABLE></TD></TR></TABLE></TD></TR>
<TR><TD height="15"></TD></TR>
<TR><TD><INPUT type="button" value=" 戻る " onclick="history.back()" style="cursor : hand;"></TD></TR>
<TR><TD height="20"></TD></TR></TABLE><HR>
<!---ＨＴＭＬ--->
1;

6. サポート

バグ報告、設置トラブルなどご質問、ご要望がありましたらAmigoDatabaseファンフォーラムへご投稿下さい。
但し、AmigoDatabase以外への設置や改造などに関するご質問はご遠慮下さい。ですが、改造について通常利用の範疇で改良が必要であるかと思われることは結構です。

引用文中の「+」や「-」についてはこちらをご覧下さい。引用文の「+」や「-」が正しく表示されていない場合があります。「view plain」をクリックして頂ければ正しい引用文が表示されます。

update at 2009/12/02(Wed) 23:05:17. DataNum 46 [ TOP ]

Comment Form: 投稿数(0)

カスタマイズへのご意見やご要望などのコメントにご利用下さい。
不適切な発言は即時削除致します。
管理人はコメントに対し一切お返事を致しませんの予めご了承下さい。
導入トラブルやご質問、バグの報告はAmigoDatabaseファンフォーラムまでお願いします。

[ TOP ]