Google and Bing Maps Hackathon in
Japan ＆ Google Maps API ＇
京都 GTUG ッ 藏野文子
自己紹介
• ( 株 ) ソ 勤務
• 主 仕事 :UI 設計
– Web ( 画面 ン ＇
– PC ョン
– 組込 機器
• 京都 GTUG, FxUG 京都 , FxUG 大阪女子部
• Blog ： http://ofuku.blog.so-net.ne.jp/
• Twitter: ofuku3f
Google Maps API 種類 ？
• Maps JavaScript API
• Maps API for Flash
• Google Earth API
• Static Maps API
• MapData API→Fusion Table へ
Google Maps API Web
• Geocording API
• Direction API
• Elvation API
• Place API
Google Maps JavaScript API
• 現在 ョン V3
• Web 埋 込
• PC や iPhone/iPod touch, Android 動作
• ュ HTML 内 ネ 対応
– Indoor Street View- Art Project (Yutube:Art Project- Preview)
• 付 MapType 対応
• 便利 API
– AJAX APIs Playground
– Utility library
Google Maps JavaScript API そ ２
• 必要 ュ 読 込
ン 飛躍的 良い
• API 記述 不要
• InfoWindow 複数開く
• Google Maps 活用講 ＆勝又 ＇
Google Maps JavaScript API 関係 話題
• Indoor Street View- Art Project
(Yutube:Art Project- Preview)
• Julia Map
– HTML5 ン ン い
– Google Maps API ン 使用
– Web Worker 利用 裏 表 処理
時進行
Static Maps API
• 静止画像 (GIF PNG JPEG )
• API 不必要
• URL 経由 HTTP 応答 返
• Javascript 版 読込 待 表示 技 あ
• ン 必須
zoom,center parameter 指定 い
自動的 調整
• 衛星写真 地形
• Google Static Map
Google Maps API for Flash
• 2008.5 Flash 2008.11 AIR API
Google 表
• ActionScript3.0
• Flex, Flex SDK,Flash CS3 〜 CS5 利用可能
• 視覚効果 既存 F ｌ ash 連携
• Example Code, Demo Gallery
• Catalyst 連動 (Using FXG Assets as Custom
• Markers in Google Maps-blog:Ryan Stewart)
Google Maps API for Flash –
3D Map
• 3D 表示 可能
• 3D 知識 あ 方 理解 易い
• Yaw Roll Pitch 標系
• 右手系
• ワ 標 標
• Google Earth 操作方法
• 例
脇道へ： AIR for Android
• Android OS ： Froyo
• Flex/Flash .apk 書 出
– Adobe AIR for Android 使い方Windows編
– Tutorial: Flex for Android in 90 Minutes
• 結構そ Flash 対応可能
• AIR for Android Maps
– Flash 開 者 ぶや
– AIR Android 作成： Flash, Flex Hero
ン 永井勝則氏 記事
Google Maps 商用利用 い
• Google Maps API 利用規約 い
• 商用利用 際 ン 版
• Google Maps API Premier
• "Hello World”
• HTML5 作 う！
Hello World: ソ 1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Hello World: ソ 2
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.9856514, 135.7587609); var myOptions = {
zoom: 8, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
Hello World: ソ 3
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ソ 見 ： <html>
• <!DOCTYPE html>
• 標準 主要 解釈
• 標準 いく CSS 動作
有効 あ
CSS 見
• CSS map_canvas いう ッ コン
HTML 高 100 ％ い
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding:
0px }
#map_canvas { height: 100% }
</style>
Google Maps API 読 込
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?
sensor=set_to_true_or_false">
</script>
http://maps.google.com/maps/api/js
URL Google Maps API v3 使用
必要 ン 読 込 JavaScript
示 い
• sensor true false 必 指
定 く い
Map 表示 DOM 要素
• <div id="map_canvas" style="width: 100%;
height: 100%"></div>
• 地図 表示 <div>
Map ョン
• var myLatlng = new google.maps.LatLng(-34.397,
150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
地図
• ROADMAP ： 2 次元 通常 表示
• SATELLITE ：鮮明 航空写真 表示
• HYBRID ：鮮明 航空写真 道路や地
ッ 表示
• TERRAIN ：山や川 地形的特徴
持 地図 表示
google.maps.Map - the
Elementary Object
• var map = new
google.maps.Map(document.getElementById("ma
p_canvas"), myOptions);
• 地図 表示 JavaScript Map
• 新 く map ン ン 作 場合 <div>
地図 対 コン
HTML 定義
地図 読 込
• <body onload="initialize()">
Hello World ＆ marker,InfoWindow) ソ 1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Hello World ＆ marker,InfoWindow) ソ 2
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.9856514, 135.7587609); var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Hello World ＆ marker,InfoWindow) ソ 3
// 追加
var marker = new google.maps.Marker({ position: latlng,
map: map,
title:"Hello World!" });
//Info Window
var infowindow = new google.maps.InfoWindow( { content: '<b>真 中</b>',
size: new google.maps.Size(50,50) });
Hello World ＆ marker,InfoWindow) ソ 4
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);
}); }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
配置
• var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!”
});
ン ン 配置
• var infowindow = new
google.maps.InfoWindow(
{ content: ‘<b> 真 中 </b>’,
size: new google.maps.Size(50,50)
});
ン い
• UI ン
– click, dbclick, dragstart, drag, dragend, odle,
mousemove, mouseout, mouseover
• MVC 状態変化 ン
地図等 状態 変化 通知
MVC
– bounds_changed
– center_changed
– maptypeid_changed
– zoom_changed
ン
• ン 録 ン 生
わ
• 場合 ッ 場合 ン ン
出
• google.maps.event.addListener(marker, 'click',
function() {
infowindow.open(map,marker);
});
XML 読
• XML Parsing-
• Data.xml ソ 見
<?xml version= 1.0 encoding= UTF-8 ?>
<markers>
<marker lat= 37.427770 lng= -122.144841 />
<marker lat= 37.413320 lng= -122.125604 />
<marker lat= 37.433480 lng= -122.139062 />
<marker lat= 37.445427 lng= 122.162307 />
</markers>
XML 読 込
• downloadurl.html (Jquery 版 こちら )
• XML データをパースしているソース 部分
downloadUrl( data.xml , function(data) {
var markers = data.documentElement.getElementsByTagName( marker ); for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(
parseFloat(markers[i].getAttribute( lat )), parseFloat(markers[i].getAttribute( lng )));
var marker = new google.maps.Marker( {position: latlng, map: map});
} });
吹 出 入
• 次 moredata.xml ソ 見
<?xml version= 1.0 encoding= UTF-8 ?>
<markers>
<marker name= Jackie lat= 37.427770 lng= -122.144841 />
<marker name= Peter lat= 37.413320 lng= -122.125604 />
<marker name= Mary lat= 37.433480 lng= -122.139062 />
<marker name= Puff lat= 37.445427 lng= -122.162307 />
</markers>
吹 出 入 あ XML 読
• downloadurl_info.html ソース
downloadUrl( moredata.xml , function(data) { var markers =
data.documentElement.getElementsByTagName( marker ); for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(
parseFloat(markers[i].getAttribute( lat )), parseFloat(markers[i].getAttribute("lng")));
var marker =
createMarker(markers[i].getAttribute( name ), latlng); } });
仕組 利用 例
• 奈良 勤皇 志士 ッ
• ソ あ 後
ン
Direction API 等 JSON や XML
JSON: XML ン 軽い
– JavaScript JSON 処理
for (i = 0; i < myJSONResult.results.length; i++) {
myAddress[i] = myJSONResult.results[i].formatted_address; }
'formatted_address' 値 抽出
XPath XML 解析
Direction API ？
• HTTP 使用
2地点間 計算
(静的＇
•
http://maps.google.com/maps/api/directions/output?parameters
•
– origin＆必須＇ 出 地
– Destination目的地＆必須＇, 緯 経
– mode＆省略可能 driving＇交通手段
– waypoints＆省略可能＇- ン 配列
– alternatives＆省略可能＇true 設定 代替 あ 場合 複
数 返
