Google MapsEvents

Click marker to zoom map - event bound on Google Map.

Click the marker to zoom the map.

We still use the map of London, UK, as used in the previous article.

Implement the function of zooming the map when the user clicks the marker (bind the map zoom event when the marker is clicked).

The code is as follows:

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 »

Use the addListener() event handler to register event listeners. This method takes an object and an event to listen for; when the specified event occurs, the function will be called.

Reset Marker

We change the 'center' property by adding an event handler to the map. The following code uses the center_changed event to move the marker back to the center after 3 seconds:

Example

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

Try it Yourself »

Open an info window when a marker is clicked.

Click the marker to display some text information in the info window:

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 the markers and open the info window for each marker.

Execute a window when the user clicks the map.

When the user clicks a location on the map, use the placeMarker() function to place a marker at the specified location and pop up an info window:

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 - Event Reference Manual

Google Maps API Reference Manual。

other extensions