1. 1
Geolocation API
位置情報の利用2
Copyright (c) HEART QUAKE All rights reserved .

2. 2
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Geolocation APIを使ってみよう
- 現在位置にピンを⽴立立てる

3. 3
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図にピンを表⽰示してみよう
//省省略略
var gmap = new google.maps.Map(
document.getElementById(”map”),
{ zoom: 14,
center: c_point,
mapTypeId: google.maps.MapTypeId.ROADMAP }
);
var marker = new google.maps.Marker(
{
map: gmap,
position: c_point
}
);
追加する

4. 4
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図にピンを表⽰示してみよう
- map.htmlを実⾏行行するとブラウザに
- 現在位置にピンが⽴立立った地図が表⽰示される

5. 5
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 地図にピンを表⽰示してみよう
- どの地図の、どこに、という情報が必要となる。
var 変数名 = new google.maps.Marker(
{
map: google.maps.Mapの変数名,
position: google.maps.LatLngの変数名
}
) ;
//実際のプログラム
var marker = new google.maps.Marker(
{
map: gmap,
position: c_point
}
);
名前は任意
表⽰示しているGoogle Mapを表す箱
現在位置の情報が⼊入っている箱

6. 6
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l Geolocation APIを使ってみよう
- ピンをクリックしたときに情報を表⽰示してみよう

7. 7
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l ピンをクリックして情報を表⽰示
//省省略略
var marker = new google.maps.Marker(
{
map: gmap,
position: c_point
}
);
var info = new google.maps.InfoWindow(
{ content: ”テストです” }
);
google.maps.event.addListener(marker,'click’,
function(){
info.open(gmap,marker);
}
);
追加する

8. 8
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l ピンをクリックして情報を表⽰示

9. 9
//省省略略
var marker = new google.maps.Marker(
{
map: gmap,
position: c_point
}
);
var info = new google.maps.InfoWindow(
{ content: テストです” }
);
google.maps.event.addListener(marker,'click’,
function(){
info.open(gmap,marker);
}
);
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l ピンをクリックして情報を表⽰示
表⽰示したい
情報を記述
markerがクリックしたときの
イベントを設定する。
open(表⽰示先の地図、
関連付けるマーカー)

10. 10
Copyright (c) HEART QUAKE All rights reserved .
お疲れ様でした！！