Linux Install Memo

サーバー管理者によるLinux関連ソフトのインストールメモ

Home » □グーグルマップで遊ぼう!

□グーグルマップで遊ぼう!

参照:
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&amp;v=2&amp;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&amp;v=2&amp;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;
}

Name of author

Name: admin

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA