Google Maps イベント

マーカをクリックするとズームします - Google maps にイベントハンドラをアタッチ。

マーカをクリックするとズームする

前ページの地図（英国ロンドンを中心とした地図）を使用します。

ここでは、ユーザがマーカーをクリックしたときにズームしようと思います（クリックした時にマップをズームするマーカにイベントハンドラーをアタッチします）。

追加のコードは次の通りです：

例

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

Try it Yourself »

addListener() イベント・ハンドラを使用して、イベント通知（notification）を登録します。このメソッドには、オブジェクト、リッスンするイベント、指定したイベントが発生したときに呼び出す関数を指定します。

Pan Back to Marker

ここでは、ズームの変更を保存し、3秒後に地図をパンします：

例

google.maps.event.addListener(map,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});

Try it Yourself »

マーカをクリックすると情報ウィンドウを開く

マーカクリックすると、テキスト付きの情報ウィンドウにが表示されます：

例

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Try it Yourself »

マーカを設定し各マーカに情報ウィンドウを開く

マップをクリックすると、関数が実行されます。

placeMarker() 関数は、ユーザがクリックした場所にマーカを配置し、マーカの緯度と経度を持つ情報ウィンドウを表示します：

例

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});

function placeMarker(map, location) {
var marker = new google.maps.Marker({
    position: location,
    map: map
});
var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}

Try it Yourself »

❮ 前章へ次章へ ❯