3
27
2016
Google Maps のイベント処理
Google Maps のイベント処理のサンプル
Google Developersの “Google Maps JavaScript API” ページにGoogle Mapsで発生するイベントの種類をほぼリアルタイムで画面上に表示させるサンプルが載っている．Google Mapsの機能をフルに活用したカスタムWEBマップを作成する際の参考にすると良いだろう．
https://developers.google.com/maps/documentation/javascript/events
【脱Google Mapsにより実例はありません】
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>Google Map Events Explorer</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#google_map_div {
height: 100%;
}
.event {
transition: background-color 0.5s ease-out;
padding-bottom: 2px;
}
#google_map_div {
float: left;
width: 500px;
height: 400px;
margin-right: 6px;
}
#events {
padding: 2px;
overflow: hidden;
font-size: 15px;
font-family: 'Droid Sans Mono', monospace;
}
.active {
background-color: #99FFCC;
}
.inactive {
background-color: white;
}
</style>
<script type='text/javascript' src='https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&ver=4.4.2'></script>
<script>
var events = [
'bounds_changed', 'center_changed', 'click',
'dblclick', 'drag', 'dragend',
'dragstart', 'heading_changed', 'idle',
'maptypeid_changed', 'mousemove', 'mouseout',
'mouseover', 'projection_changed', 'resize',
'rightclick', 'tilesloaded', 'tilt_changed',
'zoom_changed'
];
function setupListener( map, name ) {
var eventRow = document.getElementById(name);
google.maps.event.addListener( map, name, function() {
eventRow.className = 'event active';
var timeout = setTimeout( function() {
eventRow.className = 'event inactive';
}, 1000 );
});
}
function initialize() {
populateTable();
var mapDiv = document.getElementById( 'google_map_div' );
var map = new google.maps.Map( mapDiv, {
center: new google.maps.LatLng( 35.6813529, 139.767343 ),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for ( var i = 0; i < events.length; i++ ) {
setupListener( map, events[i] );
}
}
// Dynamically create the table of events from the defined hashmap
function populateTable() {
var eventsTable = document.getElementById( 'events' );
var content = '';
for ( var i = 0; i < events.length; i++ ) {
content += '<div class="event" id="' + events[i] + '">' + events[i] +
'</div>';
}
eventsTable.innerHTML = content;
}
// Load the map
google.maps.event.addDomListener( window, 'load', initialize );
</script>
</head>
<body>
<div id="main">
<div id="google_map_div">
</div>
<div id="events">
</div>
</div>
</body>
</html>
