Google Maps上に投稿データを展開：PCからの閲覧
投稿されたデータをGoogle Maps上に展開します。PCでの閲覧の場合は「Google Maps JavaScript API」を使ってGoogle MapsをHTMLの中に埋め込み、「pc_map.php?id=[mailテーブルのid]」という形式で呼び出される画面とします。
「Google Maps JavaScript API」の公式ドキュメントはこちらのURLを参照ください。投稿データの取得は先に説明したconfirm.phpと同様のPDOによる形式のため、本項では割愛させていただきます。
Google Maps APIを利用してブラウザ上に地図を表示するためには、次のようにGoogle Maps APIのjavascriptコードをHTML内に組み込む必要があります。
［リスト16］pc.php（抜粋）
<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps?file=api&v=2&key=<?php echo $google_map_key; ?>&hl=ja"></script>
Google Maps APIのJavascriptは非常にメソッドが多いので、本サンプルで利用するもののみ簡単な概要を記載します。
Google Maps API Javascriptメソッドの概要
| 関数名 | 概要 |
| GBrowserIsCompatible() | Google Mapsが利用できるブラウザかどうかを返します |
| GMap2('divのid') | 指定されたdivタグの中に地図を表示します |
| GMap2#setCenter(GLatLngオブジェクト, 倍率) | 地図の中心、倍率を指定します |
| GMap2#addControl(コントロール, 位置) | 地図上に「地図タイプ切り替え」「縮尺率切り替え」といったコントロールを配置します |
| GMap2#addOverlay(オーバーレイオブジェクト) | 地図上にオーバーレイオブジェクト（ラインやマーカー）を表示します |
| GLatLng(緯度, 経度,) | 地図上の緯度経度を指定するオブジェクト |
| GMarker(GLatLngオブジェクト) | 地図上に表示するマーカーのオブジェクトを生成します |
| GMarker#openInfoWindowHtml(文字列) | マーカー上にHTMLタグを含む文字列を情報ウィンドウ（吹き出し）として表示します |
| GEvent.addListener(オブジェクト、イベント、ハンドラ) | 地図上にイベント、ハンドラを登録します |
地図を表示したい箇所をdivタグで表示させたい地図のサイズとともに定義します。
［リスト17］pc.php（抜粋）
<div id="map" style="width:640px; height:480px" align="center"></div>
divタグで指定した領域に地図を表示させます。
［リスト18］pc.php（抜粋）
// id="map" で指定した部分に地図オブジェクトを指定
var map = new GMap2(document.getElementById("map"));
// 投稿の緯度、経度を地図に中心に、倍率を15倍に設定
var point = new GLatLng(<?php echo $lat; ?>,<?php echo $lon; ?>);
map.setCenter(point, 15);
投稿された位置にマーカーを立てて情報ウィンドウに投稿情報を表示させます。
［リスト19］pc.php（抜粋）
// マーカーオブジェクトを作成
var mp = new GLatLng(point.lat(), point.lng());
var marker = new GMarker(mp);
// 情報ウィンドウ内に表示させるhtml
var html = '<table width="200" height="150" border=0><tr><td>'
+ '<img src="image.php?file=<?php echo $image_name; ?>&width=120" /><br />'
+ '</td><td> </td><td>'
+ '<?php echo $address; ?><br /><br />'
+ '<?php echo $subject; ?><br /><br />'
+ '<?php echo $body; ?><br /><br />'
+ '</td></tr></table>';
// 地図にマーカーを設置
map.addOverlay(marker);
// 情報ウィンドウに表示させるhtmlを指定
marker.openInfoWindowHtml(html);
地図の他の場所をクリックすると情報ウィンドウが消えるので、マーカーをクリックした際に情報ウィンドウを表示するイベントを登録します。
また倍率を変更するコントローラー、地図の種類を切り替えるコントローラーも追加します。
［リスト20］pc.php（抜粋）
// イベントを登録
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// 地図の左側に縮尺率コントローラーを配置
map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5)));
// 地図の左側に地図タイプ切り替えコントローラーを配置
map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5, 5)));
実行結果は次のようになります。
情報ウィンドウも地図内に収まる様にGoogle Maps側で自動で調整されるため、地図の中心に指定した緯度、経度が必ずしも表示されている地図の中心になるとは限らないので注意してください。
PCでの投稿表示
