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

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

3. 3
//省省略略
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(表⽰示先の地図、
関連付けるマーカー)
復復習

4. 4
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
l 複数のピンをたてて、クリックした際に情報を表⽰示

5. 5
l geo3.htmlを編集します
//省省略略
script src=http://maps.google.com/maps/api/js?
sensor=true/script
script type=text/javascript”
var data = new Array();
data.push({position: new google.maps.LatLng(
35.697745, 139.826395), content: '⻲亀⼾戸'});
data.push({position: new google.maps.LatLng(
35.700295, 139.833692), content: '⻲亀⼾戸⽔水神'});
//次のページへ
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
ピンを⽴立立てたい場所と
コンテンツを保存する箱
dataにピンを建てる場所と、
コンテンツを保存する

6. 6
l geo3.htmlを編集します
//前のページの続き
function attachMessage(marker, msg)
{
google.maps.event.addListener(marker, 'click',
function(event) {
new google.maps.InfoWindow({ content: msg })
.open(marker.getMap(), marker);
});
}
window.addEventListener(load, function(){
//省省略略
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
マーカー情報とコンテンツ
を受け取る関数を定義
やっていることは既に学んだ
markerがクリックしたときの
イベントを設定するということ

7. 7
l geo3.htmlを編集します
var gmap = new google.maps.Map(
document.getElementById(map),
{
zoom: 14,
center: c_point,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
for (i = 0; i data.length; i++) {
var myMarker = new google.maps.Marker(
{ position: data[i].position, map: gmap }
);
attachMessage(myMarker, data[i].content);
}
//省省略略
Copyright (c) HEART QUAKE All rights reserved .
Geolocation API
dataに⼊入れた(push)した
場所の数だけ繰り返す。
for⽂文については調べること!
dataの i 番⽬目のデータにピンを
設定する。既に学習済みなので
過去の講義を⾒見見てみること。

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