Google マップのイベント

マーカーをクリックして拡大

前のページの地図を使用しています：イギリスのロンドンを中心にした地図。

今、ユーザーがマーカーをクリックしたときに拡大を行いたいです（マーカーにイベントハンドラを追加して、クリック時に地図を拡大します）。

これは追加されたコードです：

インスタンス

// マーカーをクリックすると拡大を9に
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: '緯度: ' + location.lat() +
    経度: ' + location.lng()
  });
  infowindow.open(map,marker);
}