PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! テーマ 研 究 会 (04/28) Google Mapsを 使 う 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg10@cuc.ac.jp 資 料 http://www.cuc.ac.jp/rg10/
前 回 の 課 題 (1)+α +α 単 に$addrを 変 更 するだけでは 面 白 くない 利 用 者 がブラウザ(IEなど)から 入 力 できるとよい テーマ 研 究 会 1で 習 った 内 容 を 復 習 して 使 う フォームで 入 力 させ POSTやGETを 使 って 送 信 実 現 方 法 入 力 用 のフォームのHTMLファイルを 新 規 作 成 フォームから 送 信 された 住 所 の 文 字 列 を 受 信 す る 部 分 をgc2.phpに 追 加 する gc3.phpとする 2
入 力 用 のフォームのHTMLファイルを 新 規 作 成 sendaddr.htm UTF-8で 保 存 入 力 用 のフォームをHTMLで 作 成 <!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> 3
sendaddr.htm 送 信 された 住 所 の 文 字 列 を 受 信 する 部 分 をgc2.phpに 追 加 gc2.phpを 改 造 して sendaddr.htmからpostで 送 信 された 住 所 の 文 字 列 を 受 信 し 処 理 する 処 理 内 容 は 変 更 無 し 変 更 点 Geocodingを 利 用 して 緯 度 経 度 を 取 得 Heartrails expressを 利 用 して 緯 度 経 度 から 最 寄 り 駅 を 検 索 結 果 を 表 示 gc3.phpとして 保 存 $addrのところを POSTで 受 信 したパラメタにする $addr = $_POST['addr']; 4
Google Maps APIを 使 うには Webサーバごとに API keyが 必 要 www.cyaneum.orgでも 取 得 ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8M cjfx4usdenjsu2z68t7errpqdtpjwse5weo0jvjby umzon7qw これをURLやHTMLに 組 み 込 んで 使 う 5
PC 用 のサンプル( 前 半 ) このファイルを www.cyaneum.orgのユーザのpublic_htmlにコピー IEでhttp://www.cyaneum.org/~ユーザ 名 /maptest.htm <!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> Google MapsのJavaScriptライブラリをインポートして 自 分 のプログラムで 使 え るようにする 6
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> 新 しいGMap2オブジェ クトを 作 成 しmapという idを 持 つ<div> 要 素 と 結 びつける 中 心 点 の 緯 度 経 度 を 設 定 し ズームレベル 16で 表 示 する <div> 要 素 の 大 きさ つ まり 地 図 の 表 示 領 域 の 大 きさは500x300ピ クセルに 設 定 7
機 能 の 追 加 コントロールの 追 加 拡 大 縮 小 用 コントロール 地 図 の 種 類 のコントロール オーバービューマップの 追 加 マーカーの 追 加 マーカーの 追 加 情 報 ウィンドウの 表 示 8
コントロールの 追 加 拡 大 縮 小 用 のコントロール( 赤 字 部 分 を 追 加 ) function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng(35.741518, 139.9077299), 16); } } GSmallMapControlを GLargeMapControl()に 変 えても 良 い 9
コントロールの 追 加 地 図 の 種 類 のコントロール( 赤 字 部 分 を 追 加 ) 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); } } 最 初 から 指 定 した 種 類 の 地 図 を 表 示 航 空 写 真 を 表 示 させたいとき map.setcenter(new GLatLng(35.741518, 139.9077299), 16, G_SATELLITE_MAP); } 普 通 の 地 図 の 場 合 :G_NORMAL_MAP 地 図 + 写 真 の 場 合 :G_HYBRID_MAP 10
コントロールの 追 加 オーバービューマップの 表 示 ( 赤 字 部 分 を 追 加 ) 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)); map.setcenter(new GLatLng(35.741518, 139.9077299), 16); 11
マーカーの 追 加 表 示 したい 位 置 を 中 央 に 表 示 するより 効 果 的 ( 赤 字 部 分 を 追 加 ) 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); 12
情 報 ウィンドウの 表 示 任 意 の 位 置 にメッセージを 表 示 (ここではマー カーと 関 係 ない) openinfowindowhtml()を 利 用 緯 度 経 度 とHTMLのコードを 指 定 できる 赤 字 部 分 を 修 正 13
情 報 ウィンドウの 表 示 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>"); 14
マーカーをクリックしたら 情 報 ウィンドウを 表 示 させる イベントの 発 生 :マウスでクリック など イベントの 処 理 :イベントリスナーを 使 う クラス:GEventを 使 う 静 的 メソッド addlistener()の 引 数 に マーカーに 対 する クリックをどう 処 理 するかを 指 定 する 15
マーカーをクリックしたら 情 報 ウィンドウを 表 示 させる 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); }); 16
PHPと 組 み 合 わせる Google Maps APIはJavaScriptからの 利 用 を 前 提 に 作 られており そのままではPHPで 使 え ない ライブラリ GoogleMapsAPIクラス を 使 用 する Phpinsider.comから 配 布 されている PHPの 知 識 のみでGoogleMapsAPIを 利 用 可 能 日 本 対 応 部 分 は 秋 元 裕 樹 氏 作 成 の 日 本 向 け 対 応 クラスを 利 用 する 次 回 やります 17
携 帯 電 話 の 制 約 PCのように JavaScriptがブラウザから 使 えず Ajaxにも 対 応 していないので Google Mapsなど の 楽 しいWebアプリは 使 えない しかし 地 図 を 利 用 したいアプリやサービスはた くさんある 解 決 法 地 図 画 像 を 静 止 画 として 利 用 する Google Static Maps API(Googleマップの 静 的 画 像 用 API)が 公 開 http://code.google.com/intl/ja/apis/maps/documentation/st aticmaps/ 18
地 図 を 静 止 画 で 出 力 する 方 法 Google Static Maps API(Googleマップの 静 的 画 像 用 API)を 使 う http://code.google.com/intl/ja/apis/maps/documenta tion/staticmaps/ 使 い 方 例 千 葉 商 科 大 学 を 中 心 に ズームレベル14で 画 像 サイズを240ドット 320ドットで 表 示 する http://maps.google.com/staticmap?center=35.74151 8,139.9077299&zoom=14&size=240x320&maptype= mobile&key=abqiaaaap1iu9k7w5gu4nwbust9dqx Twk1T8McJfX4uSDENJSU2z68T7eRRPQdTpjWsE5WEo 0jVjbyumzoN7Qw このURLをブラウザで 開 く か HTMLの 中 でIMGタグに 組 み 込 む 19
使 い 方 例 の 地 図 画 像 20
画 像 にマーカーを 追 加 する URLにマーカーの 座 標 と 設 定 値 を 並 べて 書 く markers=markerdescriptor1 markerdescriptor2 mark erdescriptor3... 設 定 値 (オプションなくてもよい これらをつなげ て 書 く ) 大 きさ: size {tiny, mid, small} 省 略 すると 普 通 のサイ ズ 色 : color {black, brown, green, purple, yellow, blue, gray, orange, red, white}. アルファベットまたは 番 号 : alphanumeric-character {a-z, 0-9} 21
画 像 にマーカーを 追 加 する 例 千 葉 商 科 大 学 に 青 で S の 文 字 のマーカーを 付 ける http://maps.google.com/staticmap?center=35.741518,139.9077299&zoom=14&size=240x32 0&maptype=mobile&key=ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2 z68t7errpqdtpjwse5weo0jvjbyumzon7qw&markers=35.741518,139.9077299,blues 22
さらにマーカーを 追 加 する で 区 切 って 位 置 情 報 と 設 定 値 を 付 ける 例 国 府 台 駅 の 緑 で G の 文 字 のマーカーを 付 ける http://maps.google.com/staticmap?center=35.741518,139.9077299&zoom=14&size=240x32 0&maptype=mobile&key=ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2 z68t7errpqdtpjwse5weo0jvjbyumzon7qw&markers=35.741518,139.9077299,blues 35.73 6411,139.902906,greeng 23
位 置 情 報 の 取 得 携 帯 電 話 やスマートフォンにはGPSが 内 蔵 さ れていることが 多 く 地 球 上 の 絶 対 位 置 ( 緯 度 経 度 ( 高 度 ))を 取 得 することができる GPSが 使 えない 場 合 大 まかな 位 置 を 取 得 することができる 携 帯 電 話 では 基 地 局 情 報 PCやスマートフォンではネットワーク 位 置 情 報 24
携 帯 電 話 での 位 置 情 報 取 得 各 携 帯 電 話 会 社 ごとに 方 法 は 異 なるが GETや POSTでサーバに 送 る 仕 組 みがある( 資 料 参 照 ) サンプルプログラムを 試 す http://www.cyaneum.org/~riho-m/keitai_loc.zipをダウン ロードして 展 開 3つのファイルを www.cyaneum.orgの 自 分 の publuc_htmlに 転 送 する 次 に 携 帯 電 話 から http://www.cyaenum.org/~ユーザ 名 /gps.phpにアクセスする 25
PCやスマートフォンで 位 置 情 報 取 得 HTML5のgeolocation APIを 使 用 する JavaScriptから 呼 び 出 す サンプルプログラムを 試 す http://www.cyaneum.org/~riho-m/geo0.zipをダウンロード して 展 開 geo0.htmlファイルを www.cyaneum.orgの 自 分 の publuc_htmlに 転 送 する 次 に PCまたはスマートフォンから http://www.cyaenum.org/~ユーザ 名 /gps.phpにアクセス する( PCの 場 合 は FirefoxかChromeブラウザを 使 う) 26
課 題 後 半 のGoogle Mapsを 静 止 画 で 利 用 する 部 分 を gc3.phpに 追 加 して 検 索 された 最 寄 り 駅 をGoogle Mapsで 表 示 させなさい 入 力 実 行 したプログラムと その 実 行 結 果 をレポートしなさい レベル0: 結 果 ごとに 地 図 を 表 示 させる レベル1: 地 図 にマーカーを 付 ける 上 級 レベル: 検 索 結 果 を1つの 地 図 に 複 数 マーカーで 表 示 させる レポート 方 法 プログラムそのもの(テキスト) 実 行 画 面 のスクリーンダンプ 感 想 27
課 題 (つづき) 提 出 物 プログラムファイルと 実 行 結 果 をWordのファイルに 貼 り 付 けて メールで 提 出 する 実 行 画 面 は フリーソフトのWinShotを 使 うか または Altキー+ PrintScreenキーを 使 う ファイル 名 : kadai0428- 学 籍 番 号.doc 提 出 方 法 メールで riho-m-rg10@cuc.ac.jpに 送 る 私 個 人 宛 のメールは 受 け 取 らないので 注 意 締 切 5/11 18:00 28