10分で終わるGoogle Map公開(GoogleMapAPI + PHP + MySQL)
2006年12月26日今更ながら、Google Mapを簡単に作成した時のメモ。
普通はJavaScriptをガリx2書いてやるところなんでしょうが、面倒なのもあってタイトル通り10分でやる方法。
想定環境として、PHPとMySQLがあることが前提条件。
という感じで、メモ。
Google Maps API Keyの取得
まずは、Google Mapを使用するに当たって「Google Maps API キー」を取得する必要があります。
スクリプト側でrefererのURLをチェックしているようなので、公開(作成テスト)するURL(IP)でキーを取得します。
>> Google Maps API Key取得
簡単な英語で書いてありますが、「Sign up for a Google Maps API Key」からAPIキー取得ページへ移動します。
Google Map APIの取得
次に、「GoogleMap API」をダウンロードします。
>> PHP GoogleMapAPI by Monte Ohrt
このページが合わせて、APIのドキュメントにもなっているので、プロパティやメソッドも参照可能。
環境確認
入手した「GoogleMapAPI.class.php」は、内部でPEAR::DBを利用して、MySQLへ座標情報(GEOCODEなど)を保存しています。PEAR::DBを適切にダウンロードして、パスが通るようにしておく必要があります。
(PostgreSQLでもOKだと思いますが、とりあえずMySQLで)
MySQLにGEOCODESテーブルの作成
ここではデータベースも、テーブルも作成できる権限があるものとして想定。
$mysql -p password: mysql> create database geocodes; mysql> CREATE TABLE `GEOCODES` ( mysql> `address` varchar(255) NOT NULL default '', mysql> `lon` float default NULL, mysql> `lat` float default NULL, mysql> PRIMARY KEY (`address`) mysql> ) TYPE=MyISAM;
このgeocode.GEOCODESテーブル内に、座標データが保存されます。
googlemap.phpの作成
GoogleMapAPIのダウンロードが終われば、次のようなPHPを作成します。
<?php
/* httpoutput */
mb_http_output('UTF-8'); //スクリプトをEUCで保存する場合のみ指定
/* include */
require('GoogleMapAPI.class.php');
// オブジェクト生成
$Gmap = new GoogleMapAPI('map');
// DB接続設定(PEAR::DB)
$Gmap->setDSN('mysql://ユーザー名:パスワード@localhost/データベース名'); //データベース名は'geocodes'で生成
// Google Map Key セット + ギミック(世界で統一されるようなのでdatum指定)
$Gmap->setAPIKey('ここにGoogle Maps API Key&datum=wgs84');
// Google Mapレイアウト設定など
$Gmap->setWidth(350); //横幅を350pxに
$Gmap->setHeight(300); //高さを300pxに
$Gmap->zoom = 15; //地図のズームレベル(1～20？)
$Gmap->enableOverviewControl(); //地図右下に「オーバービュー」を表示
$Gmap->setInfoWindowTrigger('mouseover'); //マーカーマウスオーバー時にInfoWindowを表示
// 地図マーカーセット(GEOCODEで指定する場合は、addMarkerByCoords()メソッド使用)
$Gmap->addMarkerByAddress('621 N 48th St # 6 Lincoln NE 68502','PJ Pizza','<b>PJ Pizza</b>');
$Gmap->addMarkerByAddress('826 P St Lincoln NE 68502','Old Chicago','<b>Old Chicago</b>');
$Gmap->addMarkerByAddress('3457 Holdrege St Lincoln NE 68502',"Valentino's","<b>Valentino's</b>");
// Google Map用ソース
$googlemap_headerJS = $Gmap->pringHeaderJS(); // Google Map用HTMLヘッダー
$googlemap_printmapJS = $Gmap->printMapJS(); // Google Map描画用JS
$googlemap_map = $Gmap->printMap(); // Google Mapの描画
$google_map_sidebar = $Gmap->printSidebar(); // GoogleMap用サイドバーの出力(要らないかも)
// HTML出力
print<<<EOF
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
{$googlemap_headerJS}
{$googlemap_printmapJS}
<!-- necessary for google maps polyline drawing in IE -->
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
</head>
<body onload="onLoad()">
<table border=1>
<tr>
<td>{$googlemap_map}</td>
<td>{$googlemap_sidebar}</td>
</tr>
</table>
</body>
</html>
EOF;
?>
このGoogleMapAPIは、Smartyでも使用可能。
なかなか便利なので、効率的かも。