How to Add an Info Window to a Google Map
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.
- Start with the following basic Google Map. Make sure to replace
YOUR_API_KEY
in thescript
tag with your API key that you got from https://developers.google.com/maps. - Inside the
initMap()
function, create an object to hold the latitude and longitude of the Golden Gate Bridge. - Create a marker object.
- 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.
- 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.
- Use the
InfoWindow
constructor to create a new info window. - Use an event listener to open the info window when the marker is clicked.
- Open your web page in a browser to see the results. Click on the marker to see info window.
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: 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.
<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>
<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>
<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>
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);
});
<!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>