Click Marker to Zoom Map - Binding Events on Google Maps

!(https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi3.png)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i16!3i10!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=125406)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i15!3i10!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=113348)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i15!3i9!4i256!2m3!1e0!2sm!3i782547556!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=3200)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i16!3i9!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=78266)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i17!3i10!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=6393)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i17!3i11!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=53873)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i16!3i11!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=41815)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i15!3i11!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=29757)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i14!3i11!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=17699)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i17!3i9!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=10956)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i14!3i9!4i256!2m3!1e0!2sm!3i782547556!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=70510)

!(https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i5!2i14!3i10!4i256!2m3!1e0!2sm!3i782547640!3m13!2sen-US!3sUS!5e18!12m5!1e68!2m2!1sset!2sRoadmap!4e2!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!1e3!23i46991212!23i47054750!23i47083502&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&token=101290)

!(https://maps.gstatic.com/mapfiles/transparent.png)

Map data ©2026 GeoBasis-DE/BKG (©2009), Google, Inst. Geogr. Nacional, Mapa GISrael

Map data ©2026 GeoBasis-DE/BKG (©2009), Google, Inst. Geogr. Nacional, Mapa GISrael

Click Marker to Zoom Map

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

Implement the zoom map function when the user clicks on the marker (bind the map zoom event when clicking on the marker).

The code is as follows:

Example

google.maps.event.addListener(marker,'click',function(){map.setZoom(9); map.setCenter(marker.getPosition()); });

Try it »

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

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 point after 3 seconds:

Example

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

Try it »

Open Info Window When Clicking Marker

Display some text information in an info window when clicking on the marker:

Example

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

Try it »

Set Marker and Open Info Window for Each Marker

Execute a window when the user clicks on the map

Place a marker at the specified location and pop up an info window when the user clicks on a certain position on the map using the placeMarker() function:

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 »

Google Maps - Event Reference Manual

Google Maps API Reference Manual.