Microsoft PowerPoint - WMClass_2008July11.ppt

Transcription

1 Googleマップを 使 った ウェブマッピング 入 門 今 日 の 授 業 GoogleマップAPI マッシュアップ Googleアース 1

2 様 々なGoogleサービス 2

3 Googleマップのページを 開 くには もしくは 3

4 Googleマップ Googleの 地 図 を 用 いた 検 索 サービス 4

5 地 図 を 用 いた 検 索 サービス 5

6 地 図 の 操 作 ツール 地 図 の 移 動 地 図 の 拡 大 縮 小 6

7 地図の選択ツール 地図 地図 航空写真 航空写真 7

8 情 報 処 理 教 育 システムを 利 用 して GoogleマップAPIを 使 ってみよう 8

9 API (Application Programming Interface) APIとは 一 般 的 には OSの 機 能 を 利 用 するための 関 数 のこと または ソフトウェアからOSの 機 能 を 利 用 するため の 仕 様 やインターフェイスのこと IT 用 語 辞 典 バイナリ より 9

10 GoogleマップAPIのページでキーを 取 得 する Google Maps APIのページを 開 き, Sign up for a Google Maps API key をクリック. 規 約 に 同 意 し,チェックボックスにチェックを 入 れる. 自 分 のウェブサイトのURLを 入 れる. ex. 10

11 Googleにログイン Google Maps APIを 使 用 するにはGoogleアカウントを 作 成 す る 必 要 があります. ここではテストアカウント を 使 用 メール: osaka.shidai パスワード: ocu12345 *Gmailに 限 らず, 他 のメールアドレス(yahoo,hotmail, etc.)でgoogleアカ ウントを 作 成 することが 可 能. 11

12 GoogleマップAPIのページでキーを 取 得 する APIキー 取 得 したキーが 有 効 なURL サンプルスクリプト これをコピーして, 自 分 の ウェブサイトに 貼 り 付 けてみよう. ex. map.html 12

13 スクリプトを 貼 り 付 けたページにアクセス ex. 13

14 サンプルソースを 見 てみよう API 部 分 Body 部 分 ここで 地 図 のサイズを 定 義 している. 地 図 のサイズを 変 更 してみよう. ex. width=600 height=400 14

15 Googleマップをカスタマイズ 初 期 表 示 を 関 西 圏 に 設 定 する. function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); // map.setcenter(new GLatLng( , ), 13); map.setcenter(new GLatLng(35,135), 7); // コメント (// 以 降 は 無 効 になります) map.setcenter(glatlng( 緯 度, 経 度 ),スケール); ブラウザを 更 新 してみる. 経 緯 度,スケールを 変 更 してみよう. ex. スケールを 7 4 経 度, 緯 度 を (35, 135) (36, 138) 15

16 コントロールパネルを 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); ブラウザを 更 新 してみる. 試 してみよう GSmallMapControl() GSmallZoomControl() 16

17 地 図 選 択 アイコンを 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); ブラウザを 更 新 してみる. 17

18 縮 小 地 図 を 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); ブラウザを 更 新 してみる. 18

19 縮 尺 スケールを 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); map.addcontrol(new GScaleControl(300)); ブラウザを 更 新 してみる. スケールで 大 学 の 敷 地 を 図 ってみよう 19

20 マーカーを 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); map.addcontrol(new GScaleControl(300)); var point = new GLatLng( , ); var marker = new GMarker(point); map.addoverlay(marker); 更 新 して,ズームしてみよう. 20

21 マーカーを 移 動 できるようにカスタマイズ var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); map.addcontrol(new GScaleControl(300)); var point = new GLatLng( , ); var marker = new GMarker(point, {draggable: true}); map.addoverlay(marker); マーカーをドラッグして, 移 動 してみよう. 21

22 マーカーにふきだしを 追 加 var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); map.addcontrol(new GScaleControl(300)); var point = new GLatLng( , ); var marker = new GMarker(point); map.addoverlay(marker, {draggable: true}); var comment = "<font color=red>osaka City University</font> <br>" + "<a href= Web Site</a>"; GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml(comment); }); マーカーをクリックしてみよう. commentのhtmlを 変 更 してみよう. 22

23 Googleマップをカスタマイズ 位 置 取 得 機 能 を 追 加 var map = new GMap2(document.getElementById("map")); GEvent.addListener(map, "moveend", function() { var center = map.getcenter(); document.getelementbyid("message").innerhtml = center.tostring(); }); // I *エルではなくアイです map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); <body onload="load()" onunload="gunload()"> <div id="map" style="width: 500px; height: 300px"></div> <div id="message"></div> </body> </html> 23

24 Googleマップをカスタマイズ 位 置 取 得 機 能 を 追 加 大 学 の 経 緯 度 を 調 べてみよう 24

25 Yahoo!地図情報 デモサイト 25

26 Google Maps API リファレンス Google Maps API 参 考 URL Geekなページ Google Maps API Blog 月 と 六 ペソ 26

27 マッシュアップ (Mash-up) マッシュアップとは IT 用 語 としては 複 数 の 異 なる 提 供 元 の 技 術 やコンテンツを 複 合 させて 新 しいサービスを 形 作 ること 複 数 のAPIを 組 み 合 わせて 形 成 された あたかもひとつのWeb サービスであるかのような 機 能 が マッシュアップと 呼 ばれる マッシュアップ (MashUp)とは 混 ぜ 合 わせる というほどの 意 味 である IT 用 語 辞 典 バイナリ より 27

28 マッシュアップサイト リアルタイム 地 震 情 報 地 図 世 界 の 地 震 情 報 がリアルタイムに 地 図 表 示 されるサービス ライヴニュース 情 報 Yahooニュースの 情 報 が 地 図 上 で 表 示 されるサービス ジオグリ GPS 携 帯 で 撮 った 位 置 情 報 付 きの 写 真 やブログを 共 有 できるサービス Flickr 写 真 共 有 サイト 撮 った 写 真 に 位 置 情 報 を 追 加 でき, 地 図 表 示 が 行 える 28

29 マッシュアップ ゲームとGoogle Maps API Google Mapsで 鈴 鹿 サーキット 試 走 RIDE on the SKYWAVE ver Tripods - online multiplayer Google Maps game Google Maps Golf Brewster Jennings Protects America: The global spy hunt game. 参 考 Google Maps API 徹 底 活 用 ガイド 29

30 GeoRSSとは? RSS(Really Simple Syndication, RDF Site Summary )とは? Webサイトの 見 出 しや 要 約 などのメタデータを 構 造 化 して 記 述 するXMLベー スのフォーマット 主 にサイトの 更 新 情 報 を 公 開 するのに 使 われている GeoRSS RSSのフォーマットを 拡 張 して 位 置 情 報 をRSSフィードに 格 納 できるようにした 仕 様 IT 用 語 辞 典 e-wordより 30

31 簡 単 なマッシュアップサイト 構 築 31

32 マッシュアップのお 話 をする 前 に まず どういうモノがマッシュアップ というものなのか 例 を 示 しながら 進 めていきたいと 思 います 32

33 リクルート 発 行 の 旅 行 専 門 雑 誌 じゃらん インターネットから 宿 ホテルの 予 約 が 出 来 る じゃらん.net 33

34 URLに 以 下 のアドレスを 記 入 し アクセスして 下 さい 34

35 右 の 図 はイメージ 図 です Googlemaps +じゃらん Googlemapsから 地 図 を 提 供 してもらい じゃらんからは 宿 やホテルの 情 報 を 提 供 して もらうことで 新 しいカタチの サービスを 作 る 事 ができます 一 般 の 閲 覧 者 35

36 36

37 通 天 閣 位 置 情 報 緯 度 : 度 経 度 : 度 位 置 情 報 を 写 真 にくっつけることが 出 来 る!! 37

38 loc.alize.us 38

39 位 置 情 報 がくっついている 写 真 の 位 置 を 表 している 39

40 右 の 図 はイメージ 図 です Googlemaps + Flickr + Google 検 索 Googlemapsから 地 図 を 提 供 してもらい Flickrからは 位 置 情 報 の 付 いた 写 真 を 提 供 してもらい 地 名 等 の 検 索 は Googleの 検 索 機 能 を 利 用 して 新 しいカタチのサービスを 作 って います 40

41 皆 さんに 実 際 に 行 ってもらう マッシュアップですが 41

42 1 上 のURLをアドレスバーに 入 力 する 2 表 示 された 全 文 をコピーする 3テキストエディタのKwriteに 張 り 付 ける 4 名 前 を 付 けて 保 存 する( 例 :mashup.html) 注 意!! 保 存 の 際 はutf-8で 保 存 して 下 さい 5 保 存 したファイルをブラウザから 見 てみる ( 例 ) /~あなたの 学 籍 番 号 /mashup.html 42

43 <!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>googlemaps + ZipCode MashUp</title> <script type= text/javascript src= のKeyをここに 入 力 "></script> <script type="text/javascript" src= charset="utf-8"></script> <tr><th> 郵 便 番 号 </th><td><input id="zip" type="text" size="7" onkeyup=" if (this.value.length == 7){ gmap.zip = this.value; zip2address.parse(this.value); } "></td></tr> <tr><th> 住 所 </th><td><input id="address" type="text" size="40"> <input type="submit" value=" 地 図 表 示!!" onclick="gmap.gotoaddress( document.getelementbyid('address').value, document.getelementbyid('zip').value)"> </td></tr> <div id="gmap" style="width:400px;height:400px"></div> </head> </html> 43

44 の 空 白 に 郵 便 番 号 を 記 入 してみて 下 さい 44

45 おまけのマッシュアップ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flickr API Test</title> <script type="text/javascript" src= <script type="text/javascript"><!-- window.onload = function () { photo_search({ tags: 'sky', bbox: '139.70,35.61,139.78,35.74' }); } --></script> </head> <body> <hr> <div id="photos_here">loading...</div> <hr> </body> </html> 45

46 Googleマップを 自 分 のホームページに 貼 り 付 けてみよう 46

47 Googleアースを 使 ってみよう 47

48 デジタル 地 球 儀 Googleアース 48

49 Googleアース 操 作 ツール 傾 きの 変 更 方 角 の 変 更 拡 大 縮 小 49

50 Googleアースで 拡 大 50

51 傾 きの 変 更 51

52 方 角 の 変 更 52

53 建 物 の3D 表 示 53

54 おまけ 54

55 Googleマップをカスタマイズ 位 置 テキストリアルタイム 更 新 * 必 ずファイルをバックアップしてから 編 集 しましょう function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GOverviewMapControl(new GSize(120,80))); map.addcontrol(new GScaleControl(300)); GEvent.addListener(map, "mousemove", function(latlng){ p.innerhtml = latlng; }); } } var p = document.getelementbyid("message"); 55

56 Googleマップをカスタマイズ 位 置 テキストリアルタイム 更 新 ポインターに 応 じて 経 緯 度 が 変 化 する 56

57 GoogleマップでGPSのデータを表示 57 GPS Visualizer

58 GoogleアースでGPSのデータを 表 示 58

59 Google Maps Street View (USサイト 限 定 ) 59

60 Googleアースを 追 加 <script src=" Wzt7zuelGpbWTDjkO100KJYRTqac3bA8d6fD3lt_5bZlBS796KKg" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng(35,135), 7); map.addcontrol(new GLargeMapControl()); map.addcontrol(new GMapTypeControl()); map.addcontrol(new GLargeMapControl()); map.addmaptype(g_satellite_3d_map); map.addcontrol(new GHierarchicalMapTypeControl()); *プラグインのインストール 必 要 60

61 Googleマップを 使 った 地 図 検 索 61

62 地 図 検 索 機 能 (AJAX Search API)の 追 加 1. 必 要 事 項 を 入 力 そして, Preview center location ボタン を 押 して 地 図 を 確 認 してみる. 2.Google API Keyの 時 と 同 様 に サイトのURLを 入 力. ex Generate Code ボタンを 押 す. 62

63 地 図 検 索 機 能 (AJAX Search API)の 追 加 4. 生 成 されたコードを 新 しいファイルにコ ピーし, 自 分 のウェブサイト 下 に 保 存 する. ex. map2.html 5. ウェブサイトにアクセスしてみる. ex. 63

64 地 図 検 索 機 能 (AJAX Search API)の 追 加 6. 地 図 検 索 をしてみる. ex. 梅 田 と 入 力 し, Search ボタンを 押 す. 7. 他 の 場 所 も 検 索 してみる. 64