マッピィ
  1. TOP
  2. イベント・データ処理
  3. イベント処理

イベント処理

マップ イベントの登録

地図やマーカーなどで発生するイベント通知の登録は、addListener() イベント ハンドラを使用して行います。このmethodは、オブジェクト、リッスン対象のイベント、指定されたイベントの発生時に呼び出す関数を取ります。

静的method戻り値説明
addListener(instance:Object, eventName:string, handler:Function)MapsEventListener指定されたオブジェクトのインスタンスに指定されたイベント名に、指定されたリスナ関数を追加します。このリスナの識別子を返します。識別子は eventRemoveListener() で使用できます。

下記例は地図に 'zoom' プロパティの変更に関するイベント ハンドラを追加し、zoom_changed イベントを受信したときには地図を大阪に移動します。

google.maps.event.addListener(map,'zoom_changed',
 function() {
 setTimeout(moveOsaka,1000);
 });
function moveOsaka() {
var darwin = new google.maps.LatLng
(34.686276,135.519727);
map.setCenter(darwin);
}

1つ目は引数でmap。2つ目以降イベント発生種類と処理を指定したものです。

サンプルコード

次のコードには、ユーザー イベントと状態変化イベントの両方が含まれています。クリックされたときに地図をズームするマーカーに対して、イベントハンドラを添付します。また、地図に 'zoom' プロパティの変更に関するイベント ハンドラを追加し、zoom_changed イベントを受信したときには地図を大阪に移動します。

サンプル.js

var map;
function initialize() {
 var myLatlng = new google.maps.LatLng(35.658704,139.745408);
 var opts = {
 zoom: 4,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map
 (document.getElementById("map_canvas"), opts);
 google.maps.event.addListener(map,'zoom_changed',
 function() {
 setTimeout(moveOsaka,1000);
 })

 var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 title:"Hello World!"
 })

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

function moveOsaka() {
var darwin = new google.maps.LatLng(34.686276,135.519727);
map.setCenter(darwin);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API イベント発生で移動処理</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js" ></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>マーカークリック・ズームチェンジ イベント発生で東京から大阪に移動</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例 マップ イベントの登録

マップ イベントの登録

 地図サンプルイメージ 
 イベント発生で移動処理 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル　>　イベント発生で移動処理

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

マップ イベントの削除

地図やマーカーなどで発生するイベント通知の登録は、addListener() イベント ハンドラを使用して行います。このmethodは、オブジェクト、リッスン対象のイベント、指定されたイベントの発生時に呼び出す関数を取ります。

静的method戻り値説明
addListener(instance:Object, eventName:string, handler:Function)MapsEventListener指定されたオブジェクトのインスタンスに指定されたイベント名に、指定されたリスナ関数を追加します。このリスナの識別子を返します。識別子は eventRemoveListener() で使用できます。

下記例は地図に 'zoom' プロパティの変更に関するイベント ハンドラを追加し、zoom_changed イベントを受信したときには地図を大阪に移動します。

地図をドラッグしたらインフォウィンドウ（吹き出し）を削除します。

google.maps.event.addListener(map,dragstart,
 function() {
  infoWindow.close(); 
})

1つ目は引数でmap。2つ目以降イベント発生種類と処理を指定したものです。

ページトップ