Event Handling in Google Maps

Each Google Maps API object includes named events.

These events are grouped into two categories:

User events. These are the things the user does, such as clicking or dragging in the window.
State change notifications. These reflect changes in Maps API objects.

. Your programs can listen for events and specify the code that should run when these events happen by using the addListener() method. Here's how:

Start with the following basic Google Map. Make sure to replace YOUR_API_KEY in the script tag with your API key that you got from https://developers.google.com/maps.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
	function initMap() {
		var mapOptions = {
			zoom: 5,
			center: new google.maps.LatLng(37, -116),
			mapTypeId: 'satellite'
		};
		var map = new google.maps.Map(document.getElementById('map'), mapOptions);
	}
	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

In this how-to, I'll add a marker to a map that will re-center and zoom the map when the user clicks on it.

Create a variable to hold the location of the marker.


var zoomMarker = {lat:37.629562, lng:-116.849556};

Create a marker object, and pass the location into the position property.


var marker = new google.maps.Marker({
		position: zoomMarker,
		map: map,
		title: 'Click to Zoom'
		});

Use addListen() to listen for click events on the marker.


marker.addListener('click', function() {

});

Inside the callback function, use the setZoom() and setCenter() methods to zoom the map and center it on the marker.


marker.addListener('click', function() {
	map.setZoom(10);
	map.setCenter(marker.getPosition());
});

Open your web page in a browser.
Click on the marker to see the results.

Your final code should look like the following:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
		function initMap() {
			var mapOptions = {
				zoom: 5,
				center: new google.maps.LatLng(37, -116),
				mapTypeId: 'satellite'
			};
			var map = new google.maps.Map(document.getElementById('map'), mapOptions);

			var zoomMarker = {lat:37.629562, lng:-116.849556};
			var marker = new google.maps.Marker({
				position: zoomMarker,
				map: map,
				title: 'Click to Zoom'
			});
			marker.addListener('click', function() {
				map.setZoom(16);
				map.setCenter(zoomMarker);
			});
		}

	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTM5RKrtCLpZAj5HU3K3cTvFNB240NsBg&callback=initMap">
</script>
</body>
</html>