Products
Get Started
Documentation
Showcase
Support
Blog
35
Events
Overview
UI Events
MVC State Changes
Handling Events
Example: Map and Marker Events
Example: Shape Editing and Dragging Events
Accessing Arguments in UI Events
Using Closures in Event Listeners
Getting and Setting Properties within Event Handlers
Listening to DOM Events
Removing Event Listeners
Overview
JavaScript within the browser is event driven, meaning that JavaScript responds to interactions by generating events, and
expects a program to listen to interesting events. There are two types of events:
API Reference
Code Samples
More Resources
Blog
Support
FAQ
API Picker
User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are
separate and distinct from standard DOM events.
MVC state change notifications reflect changes in Maps API objects and are named using a property_changed
convention.
Each Maps API object exports a number of named events. Programs interested in certain events will register JavaScript
event listeners for those events and execute code when those events are received by registering addListener() event handlers
on the google.maps.event namespace.
The below sample will show you what events are triggered by the google.maps.Map as you interact with the map.
converted by Web2PDFConvert.com
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
For a complete list of events, consult the Maps API Reference. Events are listed in a separate section for each object which
contains events.
UI Events
Some objects within the Maps API are designed to respond to user events such as mouse or keyboard events. For example,
these are some of the user events that a google.maps.Marker object can listen to:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
For the full list, see the Marker class. These events may look like standard DOM events, but they are actually part of the Maps
API. Because different browsers implement different DOM event models, the Maps API provides these mechanisms to listen
for and respond to DOM events without needing to handle the various cross-browser peculiarities. These events also
typically pass arguments within the event noting some UI state (such as the mouse position).
Handling Events
To register for event notifications, use the addListener() event handler. That method takes an object, an event to listen for,
and a function to call when the specified event occurs.
converted by Web2PDFConvert.com
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
converted by Web2PDFConvert.com
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
converted by Web2PDFConvert.com
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Add 5 markers to the map at random locations.
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data.
function attachSecretMessage(marker, number) {
var message = ["This","is","the","secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
converted by Web2PDFConvert.com
function initialize() {
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatLng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Change the zoom level',
position: myLatLng
});
infowindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
map.setCenter(myLatLng);
infowindow.setContent('Zoom: ' + zoomLevel);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
where instance may be any DOM element supported by the browser, including:
Hierarchical members of the DOM such as window or document.body.myform
Named elements such as document.getElementById("foo")
Note that addDomListener() simply passes the indicated event to the browser, which handles it according to the browser's
DOM event model; however, almost all modern browsers at least support DOM Level 2. (For more information on DOM level
events, see the Mozilla DOM Levels reference.)
If you've been reading the documentation this far, you're probably already familiar with one DOM event: the window.onload
event, which we've handled within the <body> tag. We use this event to trigger the initial JavaScript code once an HTML
page is fully loaded, as shown below:
<script>
function initialize() {
// Map initialization
}
</script>
<body onload="initialize()">
<div id="map-canvas"></div>
</body>
Although this event is attached to the <body> element here, this event is really a window event indicating that the DOM
hierarchy below the window element has been fully built out and rendered.
converted by Web2PDFConvert.com
Although easy to understand, having an onload event within a <body> tag mixes content with behavior. Generally, it is good
practice to separate your content code (HTML) from your behavioral code (JavaScript) and provide your presentation code
(CSS) separately as well. You can do so by replacing the inline onload event handler with a DOM listener within your Maps
API JavaScript code like so:
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas"></div>
</body>
To remove all listeners from a particular instance, call clearInstanceListeners(), passing the instance name.
var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
var listener2 = google.maps.event.addListener(marker, 'mouseover', bFunction);
// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);
To remove all listeners for a specific event type for a specific instance, call clearListeners(), passing the instance name and
the event name.
marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);
// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');
For more information, refer to the reference documentation for the google.maps.event namespace.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code
samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
Last updated October 29, 2014.
converted by Web2PDFConvert.com
Search
Follow
2.1M
Explore
Products
Showcase
Events
Communities
Connect
Blog
Google+ Community
YouTube Channel
Report an Issue
Jobs
Programs
Groups
Experts
Startups
Women Techmakers
Top Products
Ads
Analytics
Android
Cast
Chrome
Cloud
Glass
Google Apps
Google+
Maps
Wallet
YouTube
Terms of Use | Privacy Policy
English
converted by Web2PDFConvert.com