1. Home
  2. How-to Articles
  3. How to Add an Info Window to a Google Map

How to Add an Info Window to a Google Map

  • google plus

In Brief...

In Google Maps, info windows can be used to display a popup window above a specific location on a map. Here's how to add an info window to a Google map.

Instructions

  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: 8,
			center: new google.maps.LatLng(37.5, -122),
			mapTypeId: 'roadmap'
		};
		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>

    Info windows are created using the InfoWindow constructor. Info windows are usually attached to markers, but they can also be attached to a specific latitude and longitude. In this how-to, I'll add an InfoWindow to a marker at the location of the Golden Gate Bridge in San Francisco.

  2. Inside the initMap() function, create an object to hold the latitude and longitude of the Golden Gate Bridge.
    3. 
<script>
function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(37.8199, -122.4783),
		mapTypeId: 'roadmap'
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);

	var goldenGate = {lat: 37.8199,lng: -122.4783};

}
</script>
  3. Create a marker object.
    4. 
<script>
function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(37.8199, -122.4783),
		mapTypeId: 'roadmap'
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);

	var goldenGatePosition = {lat: 37.8199,lng: -122.4783};
	var marker = new google.maps.Marker();

}
</script>
  4. Pass an options object into the Marker constructor function, specifying the position of the marker, the map on which to place the marker, and the label for the marker.
    5. 
<script>
function initMap() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(37.8199, -122.4783),
		mapTypeId: 'roadmap'
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);

	var goldenGatePosition = {lat: 37.8199,lng: -122.4783};
	var marker = new google.maps.Marker({
			position: goldenGatePosition,
			map: map,
			title: 'Golden Gate Bridge'
			});

}
</script>
  5. Create a variable to hold the content that you want to display in the info window, and enter the HTML that you want to display in the info window as the value of this variable. Make sure to properly join together multiple lines by using the JavaScript concatenation (+) operator.
    6. 
var contentString = '<div id="content"><h1>Golden Gate Bridge</h1><p>The Golden Gate Bridge is a' +
'suspension bridge spanning the Golden Gate, the one-mile-wide (1.6 km) strait connecting San' +
'Francisco Bay and the Pacific Ocean. The structure links the American city of San Francisco,' +
'California - the northern tip of the San Francisco Peninsula - to Marin County, carrying' +
'both U.S. Route 101 and California State Route 1 across the strait. The bridge is one of' +
'the most internationally recognized symbols of San Francisco, California, and the United States.' +
'It has been declared one of the Wonders of the Modern World by the American Society of Civil' +
'Engineers.</p><p>Attribution: Golden Gate Bridge <a href="https://en.wikipedia.org/wiki/Golden_Gate_Bridge">' +
'https://en.wikipedia.org/wiki/Golden_Gate_Bridge</a></p></div>';
  6. Use the InfoWindow constructor to create a new info window.
    7. 
var infowindow = new google.maps.InfoWindow({
	content: contentString
});
  7. Use an event listener to open the info window when the marker is clicked.
    8. 
marker.addListener('click', function() {
	infowindow.open(map, marker);
});
  8. Open your web page in a browser to see the results. Click on the marker to see info window.
    Map with a marker and info window on the Golden Gate Bridge

    Your final code should look like the following:

    9. 
<!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: 10,
				center: new google.maps.LatLng(37.8199, -122.4783),
				mapTypeId: 'roadmap'
			};
			var map = new google.maps.Map(document.getElementById('map'), mapOptions);

			var goldenGatePosition = {lat: 37.8199,lng: -122.4783};
			var marker = new google.maps.Marker({
				position: goldenGatePosition,
				map: map,
				title: 'Golden Gate Bridge'
		});
			var contentString = '<div id="content"><h1>Golden Gate Bridge</h1><p>The Golden Gate Bridge is a' +
				'suspension bridge spanning the Golden Gate, the one-mile-wide (1.6 km) strait connecting San' +
				'Francisco Bay and the Pacific Ocean. The structure links the American city of San Francisco,' +
				'California - the northern tip of the San Francisco Peninsula - to Marin County, carrying' +
				'both U.S. Route 101 and California State Route 1 across the strait. The bridge is one of' +
				'the most internationally recognized symbols of San Francisco, California, and the United States.' +
				'It has been declared one of the Wonders of the Modern World by the American Society of Civil' +
				'Engineers.</p><p>Attribution: Golden Gate Bridge <a href="https://en.wikipedia.org/wiki/Golden_Gate_Bridge">' +
				'https://en.wikipedia.org/wiki/Golden_Gate_Bridge</a></p></div>';

			var infowindow = new google.maps.InfoWindow({
				content: contentString
			});

			marker.addListener('click', function() {
				infowindow.open(map, marker);
			});
		}
	</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