プロジェクトI/II テーマH( 担 当 : 日 紫 喜 光 良 ) 目 標 地 図 上 に 情 報 を 表 示 することが 解 決 に 役 立 つような 問 題 を 見 つけることができる 問 題 解 決 のために 必 要 な 情 報 をグループメンバーと 協 力 して 収 集 できる Google の 地 図 (Google Maps) 上 に 情 報 を 表 示 することができる 地 理 情 報 と 組 み 合 わせた 情 報 管 理 のために JSON 形 式 のテキストファイルや Google Fusion Table を 用 いることができる 作 業 環 境 :テキストエディタ ならびに HTML5 対 応 でローカルコンピュータ 上 のフ ァイルを 読 み 込 み 可 能 なWebブラウザ( 例 えば Firefox Chrome は 不 可 ) 必 要 に 応 じて 公 開 のためのWebサイト( 今 回 の 実 習 ではなくてもできる) このテキストの 使 い 方 1. 最 初 からひととおり サンプルプログラムを 読 みこめば 地 図 上 で 情 報 を 管 理 するた めの 基 礎 的 な 方 法 が 習 得 できるはずである 2. 自 分 のやりたいことを 実 現 する 方 法 を 探 すために: 目 的 別 のヒント のタイトルと 最 初 に 提 示 された 図 をざっと 眺 めて やりたいことにもっとも 近 いセクションを 見 つける 参 照 しているプログラムがあれば それをよく 読 んで 自 分 の 目 的 のために 使 えるか 使 えるとすればどこをどう 修 正 したらよいか 考 える このテキストが 扱 っていない 重 要 関 連 事 項 の 例 A)マーカーの 形 をカスタマイズすること 例 えば パン 屋 の 位 置 にはパンの 形 をしたマ ーカーを 表 示 したい B) 地 理 情 報 の 収 集 作 業 の 際 に 情 報 をWeb 上 で 入 力 できるようにする 方 法 C)エクセルや Google Spreadsheet の 情 報 をJSON 形 式 のテキストに 変 換 する 方 法 D)JSONデータをテキストファイルではなくデータベースで 保 持 する 方 法 E)ポリゴンデータの 扱 い:ダウンロード Google Fusion Table への 取 り 込 みなど F)Google Fusion Table データを Google Map 地 図 の 上 に 重 ねる 目 的 別 のヒント 1.ある 地 点 を 中 心 とする 地 図 を 表 示 する 1
ファイル 名 :case_0.html 要 点 1. 表 示 される 地 図 の 定 義 は <head> </head>(ヘダー) 内 のスクリプトである initialize() 関 数 に 書 く( 名 前 は 何 でもいいが 多 くの 例 は initialize()を 使 ってい る) ブラウザがHTML 文 書 を 読 み 込 む 際 に この 関 数 を 起 動 するようにする <head> <script> function initialize(){ var map= ; </script> </head> <body onload="initialize()"> </body> 要 点 2. 表 示 するためには 表 示 する 場 所 が 必 要 body 要 素 の 中 で div 要 素 を 定 義 id 属 性 として 名 前 が 必 要 <div id="map_canvas" style="width:500px; height:400px"></div> 要 点 3. 地 図 オブジェクトの 生 成 には クラス google.map.map を 用 いる クラスを 具 体 化 するためには (a) 画 面 上 の 表 示 場 所 と(b) 表 示 される 区 域 の 地 理 情 報 が 必 要 var myoptions = { zoom: 13, center: mylatlng, maptypeid: google.maps.maptypeid.hybrid var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); その 他 の 重 要 事 項 1). 小 文 字 で 始 まる 単 語 :オブジェクト 変 数 プロパティ( 属 性 ) 関 数 メソッド またはパッケージ オブジェクトの 例 :document 変 数 の 例 :mylatlng, myoptions, map プロパティの 例 :zoom, center, maptypeid 関 数 の 例 :initialize(){.., メソッドの 例 :document.getelementbyid パッケージの 例 :google 2
2). 大 文 字 で 始 まる 単 語 :クラス 例 :google.maps.map, google.maps.latlng 3).HTMLファイルの 構 造 <!DOCTYPE html> 文 書 型 宣 言 <html>...</html> HTML 文 書 の 開 始 終 了 タグ <head>...</head>ヘッダ 情 報 <body>...</body>ボディ 情 報 <head> 要 素 と<body> 要 素 から HTML 文 書 が 構 成 される ( 右 囲 み HTML ファイルの 構 造 ) HTML ファイルの 構 造 <!DOCTYPE html> <html> <head> ヘッダ 情 報 </head> <body> ボディ 情 報 </body> </html> ヘッダに 含 まれるもの A).<meta 属 性 =""> 文 書 全 体 の 属 性 を 設 定 するためのタグ 属 性 設 定 の 例 : <meta charset="utf-8" /> // 文 字 コードとして Unicode (UTF-8)を 使 用 する B).<script> </script>タグで 囲 まれた Javascript のプログラムへのリンクまた はプログラム 本 体 ライブラリへのリンクは 必 須 例 :Google Maps API へのリンク <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> ボディにはいくつかの<div>...</div> 要 素 が 含 まれる 参 考 : Google Map を 表 示 する-Google Maps Javascript API V3( Waste Of Time http://www6.ocn.ne.jp/~wot/web/gmap/view01.html) 3
2.ある 地 点 を 中 心 とする 地 図 の 上 に 一 つマーカーを 表 示 する ファイル 名 :case_1_mod_3.html 概 要 : 緯 度 と 経 度 で 定 義 される 地 図 上 の1 点 に マーカーを1 個 表 示 する マーカーにマ ウスを 重 ねる(マウスオーバーする)と 名 前 が 表 示 される マーカーをクリックするとウ ィンドウがポップアップして 情 報 を 表 示 する 要 点 1.マーカーの 定 義 には position プロパティ( 属 性 ) map プロパティ title プ ロパティが 必 要 position プロパティはマーカーの 座 標 ( 緯 度 と 経 度 )を map プロパ ティはマーカーを 乗 せるマップオブジェクトを そして title プロパティはマーカーの 上 にマウスを 乗 せた 時 に 表 示 するラベル を 表 す 例 :myoptions で 定 義 された map を div 要 素 mapa に 表 示 し その 上 の 座 標 point に マウスオーバーすると label を 表 示 するマーカー marker を 生 成 する var myoptions = { zoom: 13, center: new google.maps.latlng(35.692781, 140.049514), maptypeid: google.maps.maptypeid.roadmap ; map = new google.maps.map(document.getelementbyid('mapa'), myoptions); var point = new google.maps.latlng(35.692781, 140.049514); var label = 'メディアセンター'; ( 中 略 ) var marker = new google.maps.marker({position: point, map: map, title: label); 要 点 2.オブジェクト( 例 :マップやマーカー)にイベント( 例 :マウスを 乗 せたりクリ ックしたりすると 情 報 を 表 示 する)を 追 加 するためには google.maps.event.addlistner メソッドを 用 いる 例 1:マーカーをクリックすると 吹 き 出 し(infowindow オブジェクト)を 開 く 4
google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(html); infowindow.open(map, marker); ); 例 2: 地 図 をクリックすると 吹 き 出 しを 閉 じる google.maps.event.addlistener(map, 'click', function(){ infowindow.close(); ); 要 点 2.マーカーの 吹 き 出 しを 生 成 するには google.maps.infowindow クラスを 用 い る 例 : 吹 き 出 しオブジェクト infowindow を 生 成 する var infowindow = new google.maps.infowindow(); 参 考 :1.と 同 じ 3. 地 図 上 に 複 数 のマーカーを 表 示 する case_2.html の 解 説 概 要 :1つのマーカーを 表 示 する 関 数 を 繰 り 返 し 利 用 して 複 数 のマーカーを 表 示 する 4.マーカー 情 報 をJSON 形 式 の 外 部 ファイルから 読 み 込 む case_3_org2.html( 利 用 するJSONファイルは map_2.json)の 解 説 概 要 : マーカー 情 報 を 記 録 したJSON 形 式 のテキストファイルを jquery ライブラリを 用 いて 同 じサイト 上 から 読 み 込 み マーカー 情 報 オブジェクトの 配 列 を 作 る その 配 列 から1つ ずつマーカー 情 報 を 読 み 出 し マーカーを 生 成 し 直 ちに 吹 き 出 しをマーカーに 関 連 付 けて 生 成 する 要 点 1.jQuery を 利 用 するためには ヘダーで jquery へのライブラリへのリンクを 指 示 する 必 要 がある 5
例 : <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script> 要 点 2.jQuery の 関 数 は 接 頭 語 $をつけることで 区 別 する 例 : 次 のコードでは $(function(){...)と$.ajax({...)が jquery の 関 数 $(function(){ $.ajax({ success:function(json_data){ var data=jsonrequest(json_data); initialize(data); ); ); 要 点 3.$.ajax 関 数 を 用 いてHTTP 非 同 期 通 信 を 行 う このプログラムでは 同 じサー バー 上 のファイルを 読 み 込 む この 関 数 は 送 受 信 が 可 能 で 多 くのオプションがある 例 :( 要 点 4 参 照 ) 要 点 4.$.ajax 関 数 の success オプションに 対 して ファイルを 読 み 込 んだ 後 の 処 理 を 記 述 できる initialize 関 数 はここで 呼 び 出 される initialize 関 数 には 引 数 として マーカー 情 報 data が 必 要 である $(function(){ // JSON ファイル 読 み 込 み 開 始 $.ajax({ url:"map_2.json", cache:false, datatype:"json", success:function(json_data){ var data=jsonrequest(json_data); initialize(data); ); ); 要 点 5. 読 み 込 んだ JSON オブジェクト json_data を マーカー 情 報 の 配 列 である data に 入 れなおす 6
例 : function jsonrequest(json_data){ var data=[]; if(json_data.marker){ var n=json_data.marker.length; for(var i=0;i<n;i++){ data.push(json_data.marker[i]); return data; 要 点 6.for 文 を 用 いて data から 順 番 に 情 報 を 読 み 出 し google.maps.marker クラ スからマーカーを 生 成 する 吹 き 出 しの 付 加 のために 別 の attachmessage 関 数 を 生 成 す る この 関 数 に marker を 引 数 として 与 える 必 要 がある while ループの 中 で 上 で 作 成 した createmarker 関 数 を 呼 び 出 しても 動 作 しなかった おそらく 変 数 のスコープの 問 題 と 思 われるがよくわからない 例 : var i=data.length; while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.latlng(dat.lat,dat.lng), map:map, title:dat.content, ; var marker=new google.maps.marker(obj); attachmessage(marker,map,dat.url); 参 考 1)jQuery.ajax のオプションの 解 説 : http://semooh.jp/jquery/api/ajax/jquery.ajax/options/ 2)JSON 形 式 のテキストファイルのフォーマットと 利 用 方 法 http://www.ajaxtower.jp/googlemaps/gdownloadurl/index4.html 例 : {"Marker":[ 7
{"lat":"35.691228", "lng":"140.020476", "content":"jr 津 田 沼 駅 ", "url":"http://www.jreast-timetable.jp/timetable/list1009.html", {"lat":"35.685894", "lng":"140.047990", "content":" 京 成 大 久 保 駅 ", "url":"http://ekikara.jp/newdata/station/12216041.htm", {"lat":"35.689310", "lng":"140.050200", "content":" 大 久 保 十 字 路 ", "url":"http://www.keiseibus.co.jp/jikoku/bs_tt.php?key=04068_0 1a" ] 5.マーカーを 直 接 クリックする 代 わりにページ 上 のリストのアイテムをクリックすると 対 応 するマーカーに 吹 き 出 しが 表 示 される case_4_1_mod.html の 解 説 (JSON ファイルは map_3.json) 要 点 1.ページの body 要 素 の 中 にサイドバーのための div 要 素 side_bar が 追 加 された <div id="side_bar"></div> 要 点 2.プログラム 中 でマーカーをクリックする 動 作 を 行 わせるには google.maps.trigger 関 数 を 用 いる 要 点 3.クリックすると 上 記 のマーカークリック 操 作 をおこなうには HTMLでリンク 先 を Javascript のプログラムにすればよい 要 点 4. 関 数 initialize の 中 で 呼 び 出 される 関 数 myclick は marker オブジェクト の 配 列 gmarkers を 利 用 する これを 定 義 する 位 置 をいろいろ 試 してみたが 関 数 initialize の 外 で 定 義 した 場 合 だけうまく 動 作 した 8
プログラムのうち 要 点 2~4に 該 当 する 部 分 を 示 す function myclick(i) { google.maps.event.trigger(gmarkers[i], 'click');// 要 点 2. var gmarkers = [];// 要 点 4. function initialize(data){ while (i<data_length){ marker = new google.maps.marker(obj); gmarkers[i]=marker; side_bar += <a href="javascript:myclick('+i+')">' +dat.content+'< /a><br> ; // 要 点 3. i++ 6.Google Fusion Table にデータを 住 所 とともに 記 録 する ( 操 作 2) ( 操 作 2) ( 操 作 3) ( 操 作 4) ( 操 作 4) ( 操 作 4) ( 操 作 5) ( 操 作 5) 9
( 操 作 7) ( 操 作 7) 概 要 :Google Fusion Table は スプレッドシートとしての 機 能 に 加 えて データの 中 の 地 理 情 報 を 用 いてデータを 地 図 上 のマーカーとして 表 示 することができる 地 理 情 報 と して 緯 度 と 経 度 のペアだけでなく 住 所 を 利 用 できる 準 備 :Google(Gmail)のアカウントを 取 得 する 操 作 1.Google Drive を 起 動 する 操 作 2.Google Fusion Table のテーブルを 新 規 に 作 成 するために Create 次 いで Fusion Table を 選 択 する テーブルを 新 規 に 作 成 する 方 法 として3つのうちから "Create empty table"を 選 択 して テーブルを 新 規 に 作 成 する 操 作 3.Cards1( 名 前 は 変 更 可 能 )のタブを 選 択 してカードの 形 式 にし 編 集 したいカー ドをクリックする するといくつかアイコンが 出 現 するので その 中 から 鉛 筆 マークを クリックして 編 集 する 最 低 でも Text, Number, Location には 入 力 する 操 作 4.Location に 入 力 した 住 所 と 地 図 上 の 期 待 する 位 置 とのズレを 修 正 するために まず Geocoding リンクをクリックして 地 図 を 表 示 する マーカーの 位 置 がずれていれば 検 索 用 テキストフィールドに 別 の 地 名 を 入 力 してマーカーを 新 たに 表 示 し 選 択 し 直 す 操 作 5. 新 たな 行 (カード)を 追 加 するために まず Rows1( 名 前 は 変 更 可 能 )のタブ を 選 択 してテーブルの 形 式 にし メニューで Edit Add row を 選 択 して 新 たな 行 を 追 加 する 次 に 操 作 3,4によって カードに 情 報 を 入 力 する 操 作 6.データを 地 図 上 に 表 示 するために "Map of Location"タブをクリックする 操 作 7.Number の 値 によってマーカーの 色 を 変 えたい まず "Map of Location"タ ブからメニューをプルダウンして "Change map styles"を 選 ぶ 次 に "Bucket"タ ブをクリックして 数 値 の 区 切 りと 区 切 りの 数 を 調 節 するためのパネルを 開 く 10