携帯電話でGoogle Mapsを使う

Size: px

Start display at page:

Download "携帯電話でGoogle Mapsを使う"

るるみかいじ
7 years ago
Views:

1 PHPのファイルは UTF-8 BOMなしで保存し置く! テーマ研究会 (04/28) Google Mapsを使う政策情報学部渡辺恭人メーリングリスト資料

2 前回の課題 (1)+α +α 単に$addrを変更するだけでは面白くない利用者がブラウザ(IEなど)から入力できるとよいテーマ研究会 1で習った内容を復習して使うフォームで入力させ POSTやGETを使って送信実現方法入力用のフォームのHTMLファイルを新規作成フォームから送信された住所の文字列を受信する部分をgc2.phpに追加する gc3.phpとする 2

3 入力用のフォームの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

4 sendaddr.htm 送信された住所の文字列を受信する部分をgc2.phpに追加 gc2.phpを改造して sendaddr.htmからpostで送信された住所の文字列を受信し処理する処理内容は変更無し変更点 Geocodingを利用して緯度経度を取得 Heartrails expressを利用して緯度経度から最寄り駅を検索結果を表示 gc3.phpとして保存 $addrのところを POSTで受信したパラメタにする $addr = $_POST['addr']; 4

5 Google Maps APIを使うには Webサーバごとに API keyが必要取得 ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8M cjfx4usdenjsu2z68t7errpqdtpjwse5weo0jvjby umzon7qw これをURLやHTMLに組み込んで使う 5

6 PC 用のサンプル( 前半 ) このファイルを IEで名 /maptest.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google Maps JavaScript API Example</title> <script src=" K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2z68T7eRRPQdTpjWsE5WEo0jVjby umzon7qw" type="text/javascript"></script> Google MapsのJavaScriptライブラリをインポートして自分のプログラムで使えるようにする 6

7 PC 用のサンプル( 後半 ) <script type="text/javascript"> ブラウザとの互換性を調べる //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng( , ), 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 機能の追加コントロールの追加拡大縮小用コントロール地図の種類のコントロールオーバービューマップの追加マーカーの追加マーカーの追加情報ウィンドウの表示 8

9 コントロールの追加拡大縮小用のコントロール( 赤字部分を追加 ) function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng( , ), 16); } } GSmallMapControlを GLargeMapControl()に変えても良い 9

10 コントロールの追加地図の種類のコントロール( 赤字部分を追加 ) function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 16); } } 最初から指定した種類の地図を表示航空写真を表示させたいとき map.setcenter(new GLatLng( , ), 16, G_SATELLITE_MAP); } 普通の地図の場合 :G_NORMAL_MAP 地図 + 写真の場合 :G_HYBRID_MAP 10

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)); map.setcenter(new GLatLng( , ), 16); 11

12 マーカーの追加表示したい位置を中央に表示するより効果的 ( 赤字部分を追加 ) var map = new GMap2(document.getElementById("map")); var latlng = new GLatLng( , ); 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

13 情報ウィンドウの表示任意の位置にメッセージを表示 (ここではマーカーと関係ない) openinfowindowhtml()を利用緯度経度とHTMLのコードを指定できる赤字部分を修正 13

14 情報ウィンドウの表示 var map = new GMap2(document.getElementById("map")); var latlng = new GLatLng( , ); 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=' 千葉商科大学 </a>です " + "<br> 学長もがんばってる</p>"); 14

15 マーカーをクリックしたら情報ウィンドウを表示させるイベントの発生 :マウスでクリックなどイベントの処理 :イベントリスナーを使うクラス:GEventを使う静的メソッド addlistener()の引数にマーカーに対するクリックをどう処理するかを指定する 15

16 マーカーをクリックしたら情報ウィンドウを表示させる var map = new GMap2(document.getElementById("map")); var latlng = new GLatLng( , ); var message = "<h4> 千葉商科大学 </h4><p>ここが我が母校の" + "<a href=' 千葉商科大学 </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

17 PHPと組み合わせる Google Maps APIはJavaScriptからの利用を前提に作られておりそのままではPHPで使えないライブラリ GoogleMapsAPIクラスを使用する Phpinsider.comから配布されている PHPの知識のみでGoogleMapsAPIを利用可能日本対応部分は秋元裕樹氏作成の日本向け対応クラスを利用する次回やります 17

18 携帯電話の制約 PCのように JavaScriptがブラウザから使えず Ajaxにも対応していないので Google Mapsなどの楽しいWebアプリは使えないしかし地図を利用したいアプリやサービスはたくさんある解決法地図画像を静止画として利用する Google Static Maps API(Googleマップの静的画像用 API)が公開 aticmaps/ 18

19 地図を静止画で出力する方法 Google Static Maps API(Googleマップの静的画像用 API)を使う tion/staticmaps/ 使い方例千葉商科大学を中心にズームレベル14で画像サイズを240ドット 320ドットで表示する 8, &zoom=14&size=240x320&maptype= mobile&key=abqiaaaap1iu9k7w5gu4nwbust9dqx Twk1T8McJfX4uSDENJSU2z68T7eRRPQdTpjWsE5WEo 0jVjbyumzoN7Qw このURLをブラウザで開くか HTMLの中でIMGタグに組み込む 19

20 使い方例の地図画像 20

21 画像にマーカーを追加する 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

22 画像にマーカーを追加する例千葉商科大学に青で S の文字のマーカーを付ける 0&maptype=mobile&key=ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2 z68t7errpqdtpjwse5weo0jvjbyumzon7qw&markers= , ,blues 22

23 さらにマーカーを追加するで区切って位置情報と設定値を付ける例国府台駅の緑で G の文字のマーカーを付ける 0&maptype=mobile&key=ABQIAAAAP1IU9K7W5gU4NWbusT9dQxTwk1T8McJfX4uSDENJSU2 z68t7errpqdtpjwse5weo0jvjbyumzon7qw&markers= , ,blues , ,greeng 23

24 位置情報の取得携帯電話やスマートフォンにはGPSが内蔵されていることが多く地球上の絶対位置 ( 緯度経度 ( 高度 ))を取得することができる GPSが使えない場合大まかな位置を取得することができる携帯電話では基地局情報 PCやスマートフォンではネットワーク位置情報 24

25 携帯電話での位置情報取得各携帯電話会社ごとに方法は異なるが GETや POSTでサーバに送る仕組みがある( 資料参照 ) サンプルプログラムを試すロードして展開 3つのファイルを自分の publuc_htmlに転送する次に携帯電話から名 /gps.phpにアクセスする 25

26 PCやスマートフォンで位置情報取得 HTML5のgeolocation APIを使用する JavaScriptから呼び出すサンプルプログラムを試すして展開 geo0.htmlファイルを自分の publuc_htmlに転送する次に PCまたはスマートフォンから名 /gps.phpにアクセスする( PCの場合は FirefoxかChromeブラウザを使う) 26

27 課題後半のGoogle Mapsを静止画で利用する部分を gc3.phpに追加して検索された最寄り駅をGoogle Mapsで表示させなさい入力実行したプログラムとその実行結果をレポートしなさいレベル0: 結果ごとに地図を表示させるレベル1: 地図にマーカーを付ける上級レベル: 検索結果を1つの地図に複数マーカーで表示させるレポート方法プログラムそのもの(テキスト) 実行画面のスクリーンダンプ感想 27

28 課題 (つづき) 提出物プログラムファイルと実行結果をWordのファイルに貼り付けてメールで提出する実行画面はフリーソフトのWinShotを使うかまたは Altキー+ PrintScreenキーを使うファイル名 : kadai0428- 学籍番号.doc 提出方法メールで riho-m-rg10@cuc.ac.jpに送る私個人宛のメールは受け取らないので注意締切 5/11 18:00 28

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHP のファイルは UTF-8 BOM なしで保存し www.cyaneum.org の public_html に置く! テーマ研究会 (05/10) Google Maps を使う政策情報学部渡辺恭人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg11@cuc.ac.jp 資料 http://www.cuc.ac.jp/rg11/ 前回の課題 (1)+α +α 単に