情報基礎 空間情報の利用 講義の資料は下記のＵＲＬを参照． 情報基礎 空間情報の利用 講義の資料は下記のＵＲＬを参照． http://www.ex.media.osaka-cu.ac.jp/~raghavan/gmap/gmap.html
空間情報とは z (x, y, z) x ・実世界＝4次元の空間 ・その空間の中に存在するすべてのもの（人，動物，地物）は何らかの情報を持っている。 ・すべてに共通する情報は位置 情報。 y z：標高（高さ） Ｔ : 時間 y：経度 x：緯度
空間情報を可視化するツール GPS（Global Positioning System） GIS（Geographic Information System ：地理情報システム） 国土地理院パンフレットより （株）パスコHPより
空間情報（地理空間情報） 空間上の特定の地点又は区域の位置を示す情報。位置情報ともいう。 これらの情報に関連付けられた情報。 平成19年5月に「地理空間情報活用推進基本法」が施行された。 →空間情報の活用が促進される。
空間情報の利用例 ©SANYO カーナビ インターネット 地図サービス 携帯電話 位置情報取得 ©Acer
地図情報サービス Googleマップ Bingマップ Yahoo!マップ Mapion etc. インターネット情報で、地図情報やルートの検索が行えるサービス。多くのサービスで地図データや検索機能を実装できるAPI（Application Programming Interface）を提供している。 Googleマップ Bingマップ Yahoo!マップ Mapion etc.
Googleマップ Googleの地図を用いた検索サービス
Yahoo!地図情報
地図を用いた検索サービス
Googleマップ ストリートビュー
Googleマップ マイマップ
Googleマップの欠点 場所によってはデータが少ない 情報の更新頻度 ライセンスに制約があり， 自由に複製や改変が行えない。（印刷も含め） 自由に複製や改変が行えない。（印刷も含め） 商用目的には使用できない。 （誰でもアクセスできるサイトでは使用OK） アクセス数が多いサイトには課金
JavaScript(言語）とは 情報システムのプログラミング →ソースコード記述，外部ファイル保存， コンパイル，テスト，デバッグ．．． →大変な作業 もっと手軽なプログラミング →特別な言語処理系は不要！ →Webブラウザだけで実行可能 （実際は，HTMLファイル内or外部ファイル として記述保存）
JavaScript(言語）とは <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> document.write("<h1>Todays's date.</h1>"); document.write(Date()); </script> </head> <body> </body> </html>
OpenStreetMap（OSM） 2004年にイギリスでスタートした地図版Wikiプロジェクト Free and Open な地図 GPS端末や衛星・空中写真によりデータを追加 Yahoo! Japanが地図資産を提供 （2011年3月） Yahoo! JapanロコでOSMを採用 マイクロソフトからBingの地図（写真地図） ライセンスはODbL 1.0（Open Database License）
震災前後 http://map311.ecom-plat.jp/map/map/?cid=2&gid=0&mid=13 仙台市 http://www.geotribu.net/applications/baselayers/index.php?zoom=12&lon=140.93631801639&lat=38.258645488545&l1=mapnik&l2=bingnormal&l3=googlenormal&l4=yahoonormal 相馬市 http://www.geotribu.net/applications/baselayers/index.php?zoom=13&lon=140.92790660886&lat=37.797957828358&l1=mapnik&l2=bingnormal&l3=googlenormal&l4=yahoonormal
Google Map APIをつかった 地図情報の表示と活用
API (Application Programming Interface) APIとは、一般的には、OSの機能を利用するための関数のこと。または、ソフトウェアからOSの機能を利用するための仕様やインターフェイスのこと。 IT用語辞典バイナリ http://www.sophia-it.com/ より APIライブラリ Webページ
Maps JavaScript API をクリック Googleマップ APIを使用した地図サイトを作成 Ver. 3 を使用し様々な機能を実装する。 https://developers.google.com/maps/documentation/?hl=ja Maps JavaScript API をクリック
サンプルコードをテキストエディタにコピーする。 http://www.ex.media.osaka-cu.ac.jp/~raghavan/gmap/gmap0.html サンプルコードをテキストエディタにコピーする。
コードの編集 オーストラリアのニューサウスウェールズ州のシドニーを中心とした地図が表示される。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> 携帯端末のセンサ（GPSや電子コンパス等）の情報を、 Googleマップで使用するかどうかを設定。ここでは sensor=trueとする。 オーストラリアのニューサウスウェールズ州のシドニーを中心とした地図が表示される。
緯度経度（日本）、スケール、デフォルトマップの変更 コードの編集 <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.5, 135.6); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:800px; height:600px"></div> 緯度経度（日本）、スケール、デフォルトマップの変更
Zoomの表示位置を変更 …. mapTypeId: google.maps.MapTypeId.HYBRID, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_TOP } }; Zoomの表示位置を変更
…. mapTypeId: scaleControl: true, } }; 縮尺の追加
交通情報レイヤの追加 }, scaleControl: true, } }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); 交通情報レイヤの追加
マーカーの追加
var map = new google.maps.Map(document.getElementById("map_canvas"), …… var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = '<div id="content">’+ '<div id="siteNotice">’+ '</div>’+ '<h1 id="firstHeading" class="firstHeading">Osaka</h1>’+ '<div id="bodyContent">’+ '<p><a href="http://www.city.osaka.lg.jp/">Osaka City</a></p>’+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Osaka City' google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);
地図サイズを変更するマーマーカーと説明を追加する …. </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:700px; height:600px"></div> <h1>Add Explanation about your Map</h1> </body> </html> 地図サイズを変更するマーマーカーと説明を追加する
今日やること どこか特定の場所に マーカーを立て、 吹きだしにその場所の 説明を追加する。 マーカーを立て、 吹きだしにその場所の 説明を追加する。 自分のpublic_htmlにファイルを置いて、そのGoogleマップをホームページとして表示する。 URLをメールに貼り付けて提出する。 （宛先：onisi@as.osaka-cu.ac.jp） 件名は「情報基礎0711_学籍番号」とする。