ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
131 lines (125 loc) • 4.59 kB
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"></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="https://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>
</body>
</html>