□グーグルマップで遊ぼう!
参照:
http://www.google.com/apis/maps/
http://www.geekpage.jp/web/google-maps-api/
http://www.ne.jp/asahi/free/hiroro/GoogleMapsAPI/GoogleMapsAPIDocumentation.htm
http://www.geocoding.jp/ Geocoding – 住所から緯度経度を検索
http://blog.yusukeooki.com/mylab.html
http://www.marlin-arms.co.jp/gmh/index.html
http://neta.ywcafe.net/000597.html データベース上の位置情報を効率的に検索する方法(PostgreSQL編)
http://forum.nifty.com/fyamap/kyorihoi.htm 地図の計算式
グーグルマップは緯度経度情報がわかっていればグーグルが提供する
地図(または衛星写真)の上にマーカーアイコンをいくつも付けたり
それぞれのマーカーに情報を貼り付けたりすることができる、という
すごいサービス。
個別のサイト用にキーが必要だが、そのキー一つで現状5万ヒット程度
なら無料で使っていいよ、という事らしい。ふとっぱら!
キーの取得方法はぐぐればでてくるので省略。
ここではグーグルマップを使う上でのポイントをメモしておく。
■記録するデータ
データはUTF-8で処理しないといけない、携帯は無理なので気にしなくて
いいかもしれないが、DBの中身をどうするか? 基本情報(マーカーの
緯度経度情報)については文字コードは気にしなくていいけど。
1.マーカー情報(marker_tbl) マーカーIDごとに緯度・経度情報のみ
・マーカーID(text) ユニーク
・緯度経度(point)
・登録日時(int)? time()の数値
緯度経度にはトリッキーな方法でインデックスを作る。(関数インデックス)
例:create index point_index on maker_tbl using gist(circle(geo,0));
これは、geoという緯度経度情報で半径サイズ0とした円のインデックスを
つくりなさい、ということ。なぜならpoint型ではインデックスが作れない
から。これをすることで、ある地点から半径rの中にあるマーカーを検索
する時などに速度がとっても速くなる。
2.付随情報(?????_tbl) マーカーIDごとの付随情報
例えば…
・名称
・住所
・電話番号
・そのほかいろいろ
のテーブルをそれぞれ必要に応じて作ればいい。
■データベースの構築
上記のトリッキーなインデックスは、PostgreSQL-8.x以降でないと使えない
ので、まだ7.xなら思い切って pg_dumpall して入れなおしてから設定する
こと。
/usr/local/pgsql/bin/createuser -A -D -P -E maptest
/usr/local/pgsql/bin/createdb maptest –encoding=UNICODE
/usr/local/pgsql/bin/psql -d maptest -U maptest
create table marker_tbl
(
?makerid????? text,
?geo????????? point,
?registdate?? integer
);
create unique index marker_index on marker_tbl (makerid);
create index geo_index on marker_tbl using gist(circle(geo,0));
grant all on marker_tbl to public;
■WEBページの構築
・index.html?トップページ?各自担当
・googlemap.js?基本JavaScript?まるちゃん担当
・??????.js?付属JavaScript?各自担当
基本的には「index.html」から、グーグルマップの基本処理がかかれている
「googlemap.js」や「??????.js」を呼び出す。
呼び出す時には
>?? :
>?? :
> </html>
> <script src=”./js/googlemap.js” type=”text/javascript”></script>
> <script src=”./js/subscript.js” type=”text/javascript”></script>
>?? :
>?? :
のようにして、ページの最後で呼び出すこと。
補足:距離と緯度経度との関係
地球は丸いので、同じ緯度経度の差であっても、赤道付近と極点付近では
二点間の距離が全く異なる。計算式だけでもいろいろあり。
・ガウスの平均緯度法
・ヒュベニイ(Hubeny) の平均緯度法(カシミールとか)
・球面三角法(数値地図ビューアとか)
ガウスもヒュベニィも「500km程度までの距離で、方位1秒距離1mクラス
の精度を出すための式」らしい。地球規模で考えるなら球面三角法で十分
らしい。
補足:グーグルマップの最低サンプル
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
? “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
? <head>
??? <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
??? <title>Google Maps JavaScript API Example</title>
??? <script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6MLnqMPAjOh6VRA33H0_LBQYsjhNbrBV5g99IYVpwJfLokQpcBRprXsWY_AYLYyOgiRBTOIZT71Jlg”
????? type=”text/javascript”></script>
??? <script type=”text/javascript”>
??? //<![CDATA[
??? function load() {
????? if (GBrowserIsCompatible()) {
??????? var map = new GMap2(document.getElementById(“map”));
??????? map.setCenter(new GLatLng(37.4419, -122.1419), 13);
????? }
??? }
??? //]]>
??? </script>
? </head>
? <body onload=”load()” onunload=”GUnload()”>
??? <div id=”map” style=”width: 500px; height: 300px”></div>
? </body>
</html>
補足:PostgreSQL を使うなら
−−−−−−−−−−−−−−−−−−−−−
<HTML>
? <head>
??? <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
??? <title>Google Maps JavaScript API Example</title>
? </head>
<BODY>
<?
// データベースへの接続
$DB = pg_connect(“host=hogehoge.mydns.jp port=5432 dbname=hoge_db user=hogehoge password=hoges_pwd”);
if (!$DB)
{
??? print “DBへの接続が失敗しました!?<BR>\n”;
??? print “</BODT></HTML>\n”;
??? exit;
}
?
$dbname = pg_dbname($DB);
print “DB:$dbname へ接続中です!!<BR>\n”;
?>
</BODY>
</HTML>
−−−−−−−−−−−−−−−−−−−−−
こんなふうに。
補足:PHP でUTF-8を扱うなら
.htaccess に次のように書く(for PHP5)
−−−−−−−−−−−−−−−−−−−−−
AddType application/x-httpd-php .html
<IfModule mod_php5.c>
?php_value default_charset UTF-8
?php_value mbstring.language Japanese
?php_value mbstring.internal_encoding UTF-8
?php_flag? mbstring.encoding_translation On
?php_value mbstring.http_input auto
?php_value mbstring.http_output UTF-8
</IfModule>
−−−−−−−−−−−−−−−−−−−−−
ま、PHP4でもmod_php4.cになるだけで他は変わらないけど
補足:グーグルマップを使うなら UTF-8N でHTMLを書くこと
サーバーでなんか変だった。
補足:JavaScriptの変数宣言は<body>タグより前で行なうこと
<html xmlns=”http://www.w3.org/1999/xhtml“>
? <head>
??? <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
??? <title>Google Maps JavaScript API Example</title>
??? <script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7Q9V5GJtb2ypQFqOFGXXnRQbpbzxjQrr23rkm_uLILBz_mQ5JRSg4VAS_IOoG9a2rhp7EV9QS_DfVQ” type=”text/javascript”></script>
??? <!– JavaScript:変数宣言:ここから動かしてはならない –>
??? <script type=”text/javascript”>
??? //<![CDATA[
??? //]]>
??? </script>
? </head>
? <body><div id=”map” style=”width: 800px; height: 600px”></div></body>
</html>
<!– JavaScript:グーグルマップ基本処理:ここから動かしてはならない –>
<script src=”./js/googlemap.js” type=”text/javascript”></script>
<!– JavaScript:グーグルマップ付属処理:個別処理はこのファイルで –>
<script src=”./js/maruchan.js” type=”text/javascript”></script>
こんな感じ。
補足:エリアを特定した高速検索
http://neta.ywcafe.net/000597.html データベース上の位置情報を効率的に検索する方法(PostgreSQL編)
補足:PHPでイメージを扱うには
<?
// ——————–
// USERINTRO Data Check
// ——————–
function userimage_check()
{
??? global $USERINTRO;
??? global $_FILES;
??? global $_CLIENT;
??? global $USER_DIR;
??? global $ERROR;
??? $ERROR[message] = “”;
??? // 特殊文字変換
??? $USERINTRO[handle] = htmlspecialchars($USERINTRO[handle],ENT_QUOTES);
??? $USERINTRO[spec] = htmlspecialchars($USERINTRO[spec],ENT_QUOTES);
??? $USERINTRO[info] = htmlspecialchars($USERINTRO[info],ENT_QUOTES);
??? // 画像の指定がない場合には
??? if (strlen($_FILES[IMAGEFILE][tmp_name]) == 0)
??? {
??????? $USERINTRO[tmp_image] = “”;
??????? return 1;
??? }
??? list($width, $height, $type, $attr) = getimagesize($_FILES[IMAGEFILE][tmp_name]);
??? if ($_FILES[‘IMAGEFILE’][‘size’] > 256000)
??? {
??????? $ERROR[message] .= “画像ファイルのサイズが256KBを超えています。<BR>\n”;
??? }
//??? if ($type == 1)
//??? {
//??????? $kakucyoshi = ‘gif’;
//??? }
//??? elsif ($type == 3)
//??? {
//??????? $kakucyoshi = ‘png’;
//??? }
??? if ($type == 2)
??? {
??????? $kakucyoshi = ‘jpg’;
??? }
??? elseif ($type == 6)
??? {
??????? $kakucyoshi = ‘bmp’;
??? }
??? else
??? {
??????? $ERROR[message] .= “画像ファイルの形式が扱えないタイプ($type)です。<BR>\n”;
??? }
??? if (strlen($ERROR[message]))
??? {
??????? return 0;
??? }
??? if(is_uploaded_file($_FILES[IMAGEFILE][tmp_name]))
??? {
??????? if (ereg(“user([0-9])”, $_CLIENT[login_id], $param))
??????? {
??????????? $TARGET_DIR = “$USER_DIR/user$param[1]/$_CLIENT[login_id]”;
??????????? $tmp_image = “userintro_tmp.$kakucyoshi”;
??????????? move_uploaded_file($_FILES[IMAGEFILE][tmp_name], “$TARGET_DIR/$tmp_image”);
??????????? $USERINTRO[tmp_image] = $tmp_image;
??????? }
??????? else
??????? {
??????????? return 0;
??????? }
??? }
??? if (strlen($ERROR[message]))
??? {
??????? return 0;
??? }
??? return 1;
}