Googleマップのイベント
マーカーをクリックしてズーム
前のページの地図、つまりイギリスのロンドンを中心とした地図を引き続き使用します。
ここで、ユーザーがマーカーをクリックしているときにズームします（クリックするとマップをズームするマーカーにイベントハンドラーをアタッチします）。
追加されたコードは次のとおりです。
例
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
addListener（）イベントハンドラーを使用してイベント通知に登録します。このメソッドは、オブジェクト、リッスンするイベント、および指定されたイベントが発生したときに呼び出す関数を受け取ります。
パンしてマーカーに戻る
ここでは、ズームの変更を保存し、3秒後にマップをパンバックします。
例
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
マーカーをクリックするとインフォウィンドウが開きます
マーカーをクリックして、テキスト付きの情報ウィンドウを表示します。
例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
マーカーを設定し、各マーカーの情報ウィンドウを開く
ユーザーが地図をクリックしたときに関数を実行します。
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);
}