JavaScriptによるgoogle maps apiの使い方

Google Maps API
JavaScriptによる
Google Map カスタマイズ

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 2
JavaScriptによる
Google Maps の活用

まずはGPSの確認

GPSの利用
• ブラウザのGPS利用可否判断
– navigator.geolocation
• If文で判断します。
• GPSの利用
– getCurrentPosition(success, error, options)
• ユーザーの現在の位置情報を一回だけ取得する
– watchPosition(success, error, options)
• ユーザーの位置情報を定期的に監視する
– clearWatch(id)
• watchPosition()による位置情報の監視をクリアする

GPSの利用
• getCurrentPosition(success, error, options)
– メソッド内にsuccess関数、error関数、オプションを
設定
• GPSの値取得方法
– success関数の引数.coords.プロパティ
• エラーの使用方法
– error関数の引数.codeの値を利用
• １：位置情報の利用が許可されていません
• ２：デバイスの位置が判定できません
• ３：タイムアウト
– error関数の引数. messageの値
• エラー内容の詳細を返す

GPSの利用
• オプションの設定
– enableHighAccuracy
• より精度の高い位置情報を取得する（true, false）
• trueにすると消費電力増、取得時間長
– Timeout
• タイムアウトまでの時間（単位：ミリ秒）
– maximumAge
• 位置情報の有効期限（単位：ミリ秒）
• 記述例
– getCurrentPosition(success, error, {
enableHighAccuracy : true,
timeout : 6000,
maximumAge : 600000
});

Google Maps の活用

GoogleMapの利用（カンタン）
• 現在位置をGoogleMapアプリに渡す
1. 現在位置情報を取得
2. 取得した位置をhttp://maps.google.comに渡す
• 記述例
“http://maps.google.com/maps?q=” + 緯度+ “,” + 経度;

Google Maps API の利用
• Google Maps API V3の確認
– https://developers.google.com/maps/documentation/javascript/?hl=ja
– 詳しくはリファレンスを参照

Mapの表示
1. Google Maps APIの読み込み
2. LatLng(緯度, 経度)：緯度, 経度の設定
3. Map(mapタグ, MapOptions)：地図の表示
4. Marker(MarkerOptions)：マーカーの表示

Mapの利用例
• new google.maps.Map(タグオブジェクト, Options);
• 主なオプションの設定
– var Options = {
zoom:数字※大きいほど拡大,
center: new google.maps.LatLng(緯度,経度),
mapTypeId:google.maps.MapTypeId.ROADMAP
}

Markerの利用例
• new google.maps.Marker(markerOptions);
• 主なオプションの設定
– var markerOptions = {
position: new google.maps.LatLng(緯度,経度),
map: googleMapオブジェクト
}

マップコントールについて
mapTypeControl
overviewMapControl
panControl
zoomControl
streetViewControl

軌跡描画
• ポリラインの利用
– ポリラインは、地図上に各座標をつなぐ線を描画
• 記述例
– var オブジェクト=new google.maps.Polyline({
path: 緯度経度配列, //ポリラインの配列
strokeColor: ‘#FF0000’, //色（#RRGGBB形式）
strokeOpacity: 1.0, //透明度 0.0～1.0
strokeWeight: 2 //太さ（単位ピクセル）
});
オブジェクト.setMap(マップオブジェクト)

住所 → 緯度経度変換
• geocoderの利用
– オブジェクト.geocode(“場所”); で、住所 → 緯度経度
変換が利用できる
– 必ずステータスを確認し、
google.maps.GeocoderStatus.OK
で変換が成功したことを確認する

クリックによる緯度経度の取得
• マウスイベント
– google.maps.event.addListenerというイベ
ントで、LatLng (緯度,経度）を取得できる
– クリックした場所にマーカーを配置できる

JavaScriptによるgoogle maps apiの使い方

Recommended

Recommended

More Related Content

More from Yossy Taka

More from Yossy Taka (16)

Recently uploaded

Recently uploaded (9)

JavaScriptによるgoogle maps apiの使い方