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.
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: 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.
initMap()
function, create an object to hold the latitude and longitude of the Golden Gate Bridge.
<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>';
InfoWindow
constructor to create a new info window.
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
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: 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>
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.