Googleマップイベント

ズームするマーカーをクリックしてください - Googleマップにイベントハンドラをアタッチします。

ズームにマーカーをクリックします

ロンドン、イングランドを中心とした地図：我々はまだ、前のページからマップを使用します。

今、私たちは、ユーザが（私たちは、クリックされた地図をズームするマーカーにイベントハンドラをアタッチ）マーカーをクリックされたときに拡大したいです。

ここで追加されたコードは、次のとおりです。

例

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

»それを自分で試してみてください

我々は、使用してイベント通知を登録addListener()イベントハンドラを。このメソッドは、指定したイベントが発生したときに呼び出すオブジェクトのために待機するイベント、および機能を取ります。

マーカーに戻るパン

ここでは、 'センター'プロパティへの変更をマップにイベントハンドラを追加し、center_changedイベントに3秒後にバックマーカーに地図をパン：

例

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},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(event.latLng);
});

function placeMarker(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);
}

»それを自分で試してみてください