マーカークリック時の処理を追加する
地図を使ったWebサービスでは、マーカーがクリックされた場合に何らかの処理をすることがよくあります。マーカーがクリックされたらアラートダイアログを表示してみましょう。Googleマップの場合はサンプル6、Yahoo!マップの場合はサンプル7が実際のプログラムです。
Googleマップでは、google.maps.event.addListener()を使って対象となるマーカー、イベント名、イベントハンドラを設定します。Yahoo!マップでは、マーカーオブジェクトのbind()メソッドを使います。bind()メソッドにイベント名とイベントハンドラを設定します。イベントハンドラには、clickイベント以外にmouseover、mouseoutイベントを設定できます。
Googleマップでマーカーをクリックした場合
Yahoo!マップでマーカーをクリックした場合
■サンプル6[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>グーグルマップでマーカークリック時に処理を行う</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>グーグルマップでマーカークリック時に処理を行う</h1>
<div id="myMap" style="width:600px;height:400px;"></div>
</body>
</html>
■サンプル6[sample.js]
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
var map = new google.maps.Map(
document.getElementById("myMap"),{
zoom : 12, // ズームレベルは12
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP // 通常の地図を表示
}
);
// マーカーを表示する
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
// マーカーがクリックされた時に処理する
google.maps.event.addListener(marker, "click", function() {
alert("マーカーがクリックされました");
});
}
■サンプル7[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ヤフーマップでマーカークリック時に処理を行う</title>
<script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>ヤフーマップでマーカークリック時に処理を行う</h1>
<div id="myMap" style="width:600px;height:400px;"></div>
</body>
</html>
■サンプル7[sample.js]
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
var map = new Y.Map("myMap");
map.drawMap(
new Y.LatLng(lat, lng),
12, // ズームレベルは12
Y.LayerSetId.NORMAL // 通常の地図を表示
);
// 地図の種類を切り換えるコントローラーを表示
map.addControl(new Y.LayerSetControl());
// ズームコントローラーを表示
map.addControl(new Y.SliderZoomControlVertical());
// マーカーを表示する
marker = new Y.Marker(
new Y.LatLng(lat, lng)
);
map.addFeature(marker);
marker.setLatLng(new Y.LatLng(lat, lng));
// マーカーがクリックされた時に処理する
marker.bind("click", function() {
alert("マーカーがクリックされました");
});
}
