132 lines
4.5 KiB
HTML
Executable File
132 lines
4.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
Google Maps V3 API Events for google.maps.Map Demo
|
|
</title>
|
|
<style type="text/css">
|
|
body {
|
|
color: #585858;
|
|
font-family: sans-serif;
|
|
}
|
|
table {
|
|
border-spacing: 2px;
|
|
text-align: left;
|
|
}
|
|
tr {
|
|
background-color: white;
|
|
-webkit-transition:background-color 0.2s linear;
|
|
}
|
|
#map-canvas {
|
|
width: 600px;
|
|
height: 400px;
|
|
}
|
|
#map {
|
|
float: left;
|
|
width: 650px;
|
|
}
|
|
#events {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
|
|
<script type="text/javascript">
|
|
var events = {
|
|
'bounds_changed': 'fired when the viewport bounds have changed.',
|
|
'center_changed': 'fired when the map center property changes.',
|
|
'click': 'fired when the user clicks on the map (but not when they click on a marker or infowindow).',
|
|
'dblclick': 'fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.',
|
|
'drag': 'repeatedly fired while the user drags the map.',
|
|
'dragend': 'fired when the user stops dragging the map.',
|
|
'dragstart': 'fired when the user starts dragging the map.',
|
|
'heading_changed': 'fired when the map heading property changes.',
|
|
'idle': 'fired when the map becomes idle after panning or zooming.',
|
|
'maptypeid_changed': 'fired when the mapTypeId property changes.',
|
|
'mousemove': 'fired whenever the user\'s mouse moves over the map container.',
|
|
'mouseout': 'fired when the user\'s mouse exits the map container.',
|
|
'mouseover': 'fired when the user\'s mouse enters the map container.',
|
|
'projection_changed': 'fired when the projection has changed.',
|
|
'resize': 'Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, \'resize\') .',
|
|
'rightclick': 'fired when the DOM contextmenu event is fired on the map container.',
|
|
'tilesloaded': 'fired when the visible tiles have finished loading.',
|
|
'tilt_changed': 'fired when the map tilt property changes.',
|
|
'zoom_changed': 'fired when the map zoom property changes.'
|
|
};
|
|
|
|
function setBackgroundColor(eventName, color) {
|
|
var row = document.getElementById(eventName);
|
|
row.style.backgroundColor = color;
|
|
}
|
|
|
|
function setupListener(map, name) {
|
|
google.maps.event.addListener(map, name, function() {
|
|
setBackgroundColor(name, '#99CCFF');
|
|
setTimeout(function() {
|
|
setBackgroundColor(name, 'white');
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
function initialize() {
|
|
populateTable();
|
|
var mapDiv = document.getElementById('map-canvas');
|
|
var map = new google.maps.Map(mapDiv, {
|
|
center: new google.maps.LatLng(37.4419, -122.1419),
|
|
zoom: 13,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
});
|
|
var marker = new google.maps.Marker({position: new google.maps.LatLng(37.4419, -122.1419), map: map});
|
|
for (eventName in events) {
|
|
setupListener(map, eventName);
|
|
}
|
|
}
|
|
|
|
// Dynamically create the table of events from the defined hashmap
|
|
function populateTable() {
|
|
var eventsTable = document.getElementById('event_descr');
|
|
var content = '';
|
|
for (var event in events) {
|
|
content += '<tr id="' + event + '"> <th>' + event +
|
|
'</th> <td> ' + events[event] + '</td></tr>';
|
|
}
|
|
eventsTable.innerHTML = content;
|
|
}
|
|
// Load the map
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="main">
|
|
<p>
|
|
This page lists all the events that can be triggered for the
|
|
<code>
|
|
google.maps.Map
|
|
</code>
|
|
object and shows when that happens, by highlighting the names to the right.
|
|
</p>
|
|
</p>
|
|
Play around with the map and see what happens.
|
|
For more information check
|
|
<a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#Map">the API reference</a>.
|
|
</p>
|
|
<div id="map">
|
|
<h2>
|
|
Map
|
|
</h2>
|
|
<div id="map-canvas">
|
|
</div>
|
|
</div>
|
|
<div id="events">
|
|
<h2>
|
|
Events
|
|
</h2>
|
|
<table width="100%" id="event_descr">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|