1. Home
  2. How-to Articles
  3. Event Handling in Google Maps

Event Handling in Google Maps

  • google plus

In Brief...

Each Google Maps API object includes named events.

Instructions

These events are grouped into two categories:

  1. User events. These are the things the user does, such as clicking or dragging in the window.
  2. 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:

  1. 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.
    2. 
<!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.

  2. Create a variable to hold the location of the marker.
    3. 
var zoomMarker = {lat:37.629562, lng:-116.849556};
  3. Create a marker object, and pass the location into the position property.
    4. 
var marker = new google.maps.Marker({
		position: zoomMarker,
		map: map,
		title: 'Click to Zoom'
		});
  4. Use addListen() to listen for click events on the marker.
    5. 
marker.addListener('click', function() {

});
  5. Inside the callback function, use the setZoom() and setCenter() methods to zoom the map and center it on the marker.
    6. 
marker.addListener('click', function() {
	map.setZoom(10);
	map.setCenter(marker.getPosition());
});
  6. Open your web page in a browser.
    A map with a marker
  7. Click on the marker to see the results.
    The results of clicking the marker

    Your final code should look like the following:

    8. 
<!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>

Need Ajax Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss