Google Maps Events

## Google Maps API

Maps API Home Maps API Key Maps Basic Maps Overlays Maps Events Maps Controls Maps Types

## Google Maps Ref

Maps API Reference Map()

# Google Maps Events

« Previous
Next Chapter »

Click the marker to zoom - attach event handlers to Google maps.

## Click The Marker to Zoom

We still use the map from the previous page: a map centered on London, England.

Now we want to zoom when a user is clicking on the marker (We attach an event handler to a marker that zooms the map when clicked).

Here is the added code:

## Example

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Try it yourself »

We register for event notifications using the addListener() event handler. That method takes an object, an event to listen for, and a function to call when the specified event occurs.

## Pan Back to Marker

Here, we add an event handler to the map for changes to the 'center' property and pan the map back to the marker after 3 seconds on a center_changed event:

## Example

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
Try it yourself »

## Open an InfoWindow When Clicking on The Marker

Click on the marker to show an infowindow with some text:

## Example

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Try it yourself »

## Set Markers and Open InfoWindow for Each Marker

Run a function when the user clicks on the map.

The placeMarker() function places a marker where the user has clicked, and shows an infowindow with the latitudes and longitudes of the marker:

## Example

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
Try it yourself »

## Google Maps - Events Reference

Google Maps API Reference.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE