テーマ研究会（04/28）
Google Mapsを使う
政策情報学部
渡辺恭人
riho-m@cuc.ac.jp
メーリングリスト riho-m-rg10@cuc.ac.jp
PHPのファイルは、UTF-8、BOMなしで保存し、
www.cyaneum.orgのpublic_htmlに置く！
資料
http://www.cuc.ac.jp/rg10/
前回の課題（１）＋α
• ＋α
– 単に$addrを変更するだけでは面白くない
– 利用者がブラウザ（IEなど）から入力できるとよい
– テーマ研究会1で習った内容を復習して使う
• フォームで入力させ、POSTやGETを使って送信
• 実現方法
– 入力用のフォームのHTMLファイルを新規作成
– フォームから送信された住所の文字列を受信す
る部分をgc2.phpに追加する→gc3.phpとする
2
入力用のフォームのHTMLファイルを
新規作成
• sendaddr.htm ※UTF-8で保存
– 入力用のフォームをHTMLで作成
3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>住所入力</title>
</head> <body>
<form method="POST" action="gc3.php"> 住所：
<input type="text" name="addr" size=“30" /> <input type="submit" value="送信" />
</form> </body> </html>
sendaddr.htm送信された住所の文字
列を受信する部分をgc2.phpに追加
• gc2.phpを改造して、sendaddr.htmからPOSTで
送信された住所の文字列を受信し、処理する
– 処理内容は変更無し
• Geocodingを利用して緯度・経度を取得
• Heartrails expressを利用して、緯度・経度から最寄り駅
を検索
• 結果を表示
• 変更点
– $addrのところを、POSTで受信したパラメタにする
4
$addr = $_POST['addr'];
gc3.phpとして保存
Google Maps APIを使うには
• Webサーバごとに、API keyが必要
–
www.cyaneum.org
でも取得
– ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8M
cJfX4uSDENJSU2z68T7eRRPQdTpjWsE5WEo0jVjby
umzoN7Qw
– これをURLやHTMLに組み込んで使う
5
PC用のサンプル（前半）
<!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=ABQIAAAAP1IU9 K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2z68T7eRRPQdTpjWsE5WEo0jVjby umzoN7Qw" type="text/javascript"></script>
このファイルを
www.cyaneum.org
のユーザのpublic_htmlにコピー
IEで
http://www.cyaneum.org/~
ユーザ名/maptest.htm
6
Google MapsのJavaScriptライブラリをインポートして自分のプログラムで使え るようにする。
PC用のサンプル（後半）
<script type="text/javascript">//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.741518, 139.9077299), 16); } } //]]> </script> </head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div> </body> </html>
7
ブラウザとの互換性を調べる 新しいGMap2オブジェ クトを作成しmapという idを持つ<div>要素と結 びつける 中心点の緯度経度を 設定し、ズームレベル 16で表示する <div>要素の大きさ、つ まり地図の表示領域 の大きさは500x300ピ クセルに設定機能の追加
• コントロールの追加
– 拡大・縮小用コントロール
– 地図の種類のコントロール
– オーバービューマップの追加
• マーカーの追加
– マーカーの追加
– 情報ウィンドウの表示
8
コントロールの追加
• 拡大縮小用のコントロール（赤字部分を追
加）
• GSmallMapControlを
GLargeMapControl()に
変えても良い
9
function load() { if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(35.741518, 139.9077299), 16); }
コントロールの追加
• 地図の種類のコントロール（赤字部分を追加）
• 最初から指定した種類の地図を表示
– 航空写真を表示させたいとき
– 普通の地図の場合：G_NORMAL_MAP
– 地図＋写真の場合：G_HYBRID_MAP
10
function load() { if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.741518, 139.9077299), 16); } }
コントロールの追加
• オーバービューマップの表示（赤字部分を追
加）
11
var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl(),
new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
マーカーの追加
• 表示したい位置を中央に表示するより効果的
（赤字部分を追加）
12
var map = new GMap2(document.getElementById("map"));
var latlng = new GLatLng(35.741518, 139.9077299);
map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl(),
new GControlPosition(G_ANCHOR_BOTTOM_RIGHT)); map.setCenter(latlng , 16);
var marker = new GMarker(latlng); map.addOverlay(marker);
情報ウィンドウの表示
• 任意の位置にメッセージを表示（ここではマー
カーと関係ない）
• openInfoWindowHtml()を利用
– 緯度経度とHTMLのコードを指定できる
– 赤字部分を修正
13
情報ウィンドウの表示
14
var map = new GMap2(document.getElementById("map")); var latlng = new GLatLng(35.741518, 139.9077299);
map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT)); map.setCenter(latlng , 16); map.openInfoWindowHtml(map.getCenter(), "<h4>千葉商科大学</h4><p>ここが我が母校の" + "<a href='http://www.cuc.ac.jp/'>千葉商科大学</a>です。" + "<br>学長もがんばってる</p>");
マーカーをクリックしたら
情報ウィンドウを表示させる
• イベントの発生：マウスでクリック、など
• イベントの処理：イベントリスナーを使う
– クラス：GEventを使う
• 静的メソッド addListener()の引数に、マーカーに対する
クリックをどう処理するかを指定する
15
マーカーをクリックしたら
情報ウィンドウを表示させる
16
var map = new GMap2(document.getElementById("map")); var latlng = new GLatLng(35.741518, 139.9077299);
var message = "<h4>千葉商科大学</h4><p>ここが我が母校の" + "<a href='http://www.cuc.ac.jp/'>千葉商科大学</a>です。" + "<br>学長もがんばってる</p>"; map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT)); map.setCenter(latlng , 16);
var marker = new GMarker(latlng); map.addOverlay(marker);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(message); });
