4. 4
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l こんな感じになれば正解
- 今はまだ位置情報は表⽰示されず、Helloとでるだけ。
- 今から、ここに
- 「あなたが今、いる場所の」緯度度と経度度
- を表⽰示していきます！
5. 5
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 先ほどのプログラムの解説
window.addEventListener("load", function(){
if(navigator.geolocation){
document.getElementById("map").innerHTML = "Hello";
}
}, false);
このページが読み込まれた時に次の
プログラムを実⾏行行してね
Geolocation APIに対応した
ブラウザだったら
HTMLのidがmapとなっているdiv要素に
Helloという⽂文字を埋めて
6. 6
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 緯度度と経度度の表⽰示をしてみよう
//これより上は省省略略
if(navigator.geolocation){
//document.getElementById(map).innerHTML = Hello;
navigator.geolocation.getCurrentPosition(
function (pos) {
document.getElementById(map).innerHTML =
pos.coords.latitude + / + pos.coords.longitude;
}
);
}
}, false);
//これより下は省省略略
追加する
7. 7
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Geolocation APIを使ってみよう
- map.htmlを実⾏行行するとブラウザに
- 現在位置の緯度度と経度度が表⽰示される
- 緯度度：latitude
- 経度度：longitude
8. 8
var name = ”jun chiba”;
var age = ”21”;
var explain = name + ” / ” + age;
alert(explain);
Copyright (c) HEART QUAKE All rights reserved .
⽂文字列列の⾜足し算
l ⽂文字の連結は「＋」を利利⽤用する
- ある⽂文字とある⽂文字を連結させたい場合は「＋」を利利⽤用す
ることで⽂文字をつなげることができます。
結果としては
jun chiba / 21
と表⽰示されれる
補⾜足
//実際のプログラムで⽂文字連結してるところ
document.getElementById(map).innerHTML =
pos.coords.latitude + / + pos.coords.longitude;
9. 9
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Geolocation APIを使ってみよう
- 現在位置が中⼼心になる地図を表⽰示しよう
ü 現在位置とは、今、あなたがいる場所のことです。
10. 10
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図を表⽰示してみよう
html
head
meta charset=UTF-8
titleGeolocation API/title
style
#map {
width: 100%;
height: 500px;
}
/style
script type=text/javascript
//下も省省略略
CSSを追加する
mapの部分は横幅がブラウザの横幅
100%、縦は500px
11. 11
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図を表⽰示してみよう
//上は省省略略
navigator.geolocation.getCurrentPosition(
function (pos) {
var c_point = new google.maps.LatLng(
pos.coords.latitude, pos.coords.longitude);
var gmap = new google.maps.Map(
document.getElementById(”map”),
{ zoom: 14,
center: c_point,
mapTypeId: google.maps.MapTypeId.ROADMAP }
);
}
);
//下も省省略略
変更更する
mapの部分にズームは14で、中⼼心は
現在位置、地図の種類はROADMAPの
地図を表⽰示してほしい。
12. 12
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図のオプションまとめ
オプション名設定概要
mapTypeId表⽰示する地図の種類
google.maps.MapTypeId.ROADMAP通常の市街地図
google.maps.MapTypeId.SATELLITE航空写真
google.maps.MapTypeId.HYBRID航空写真と市街地図のハイブ
リッド
google.maps.MapTypeId.TERRAIN地形を含んだ地図
center地図の中⼼心点
(LatLngオブジェクト)
zoomズームレベル( 0〜～21 )
scrollwheelマウスホイールによるズームを
有効にするか
（デフォルトはtrue)
補⾜足
13. 13
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図を表⽰示するためにGoogle Map APIを使う
!DOCTYPE html
html
head
meta charset=”UTF-8”
titleHTML5/title
script src=http://maps.google.com/maps/api/js?sensor=true
/script
script type=text/javascript
window.addEventListener(load, function(){
・・・以下省省略略・・・
追加する
Google Mapの
APIを使う宣⾔言
14. 14
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Geolocation APIを使ってみよう
- map.htmlを実⾏行行するとブラウザに
- 現在位置が中⼼心となった地図が表⽰示される
15. 15
script src=http://maps.google.com/maps/api/js?sensor=true
/script
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Google Map API
- Google社が提供する地図サービスであるGoogle マップを
- Javascriptから利利⽤用できるようにしたものが
- Google Map APIです。
- Google Map APIを利利⽤用するためにはscriptタグによる
- インポート宣⾔言を追加するだけです。
- ただし、無料料版では25,000アクセス / ⽇日まで。
- それ以上は Maps API Premierライセンスの購⼊入が必要。
- http://www.goga.co.jp/solution/mapssupport.html
補⾜足
