グーグルマップ-イベント
Google Maps JavaScriptプログラムは、ユーザーが生成したさまざまなイベントに応答できます。この章では、Googleマップの操作中にイベント処理を実行する方法を示す例を示します。
イベントリスナーの追加
メソッドを使用してイベントリスナーを追加できます addListener()。リスナーを追加するオブジェクト名、イベントの名前、ハンドラーイベントなどのパラメーターを受け入れます。
例
次の例は、イベントリスナーをマーカーオブジェクトに追加する方法を示しています。プログラムは、マーカーをダブルクリックするたびに、マップのズーム値を5ずつ上げます。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
クリック時に情報ウィンドウを開く
次のコードは、マーカーをクリックすると情報ウィンドウを開きます-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
リスナーの削除
メソッドを使用して既存のリスナーを削除できます removeListener()。このメソッドはリスナーオブジェクトを受け入れるため、リスナーを変数に割り当てて、このメソッドに渡す必要があります。
例
次のコードは、リスナーを削除する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-