This example creates a map with tappable markers displaying a secret message.
Read the documentation.
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: { lat: -25.363882, lng: 131.044922 }
}
);
const bounds: google.maps.LatLngBoundsLiteral = {
north: -25.363882,
south: -31.203405,
east: 131.044922,
west: 125.244141
};
// Display the area between the location southWest and northEast.
map.fitBounds(bounds);
// Add 5 markers to map at random locations.
// For each of these markers, give them a title with their index, and when
// they are clicked they should open an infowindow with text from a secret
// message.
const secretMessages = ["This", "is", "the", "secret", "message"];
const lngSpan = bounds.east - bounds.west;
const latSpan = bounds.north - bounds.south;
for (let i = 0; i < secretMessages.length; ++i) {
const marker = new google.maps.Marker({
position: {
lat: bounds.south + latSpan * Math.random(),
lng: bounds.west + lngSpan * Math.random()
},
map: map
});
attachSecretMessage(marker, secretMessages[i]);
}
}
// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
marker: google.maps.Marker,
secretMessage: string
) {
const infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener("click", () => {
infowindow.open(marker.get("map"), marker);
});
}
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -25.363882, lng: 131.044922 }
});
const bounds = {
north: -25.363882,
south: -31.203405,
east: 131.044922,
west: 125.244141
};
// Display the area between the location southWest and northEast.
map.fitBounds(bounds);
// Add 5 markers to map at random locations.
// For each of these markers, give them a title with their index, and when
// they are clicked they should open an infowindow with text from a secret
// message.
const secretMessages = ["This", "is", "the", "secret", "message"];
const lngSpan = bounds.east - bounds.west;
const latSpan = bounds.north - bounds.south;
for (let i = 0; i < secretMessages.length; ++i) {
const marker = new google.maps.Marker({
position: {
lat: bounds.south + latSpan * Math.random(),
lng: bounds.west + lngSpan * Math.random()
},
map: map
});
attachSecretMessage(marker, secretMessages[i]);
}
}
// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
const infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener("click", () => {
infowindow.open(marker.get("map"), marker);
});
}
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using Closures in Event Listeners</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./app.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
All
<!DOCTYPE html>
<html>
<head>
<title>Using Closures in Event Listeners</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
const bounds = {
north: -25.363882,
south: -31.203405,
east: 131.044922,
west: 125.244141
}; // Display the area between the location southWest and northEast.
map.fitBounds(bounds); // Add 5 markers to map at random locations.
// For each of these markers, give them a title with their index, and when
// they are clicked they should open an infowindow with text from a secret
// message.
const secretMessages = ["This", "is", "the", "secret", "message"];
const lngSpan = bounds.east - bounds.west;
const latSpan = bounds.north - bounds.south;
for (let i = 0; i < secretMessages.length; ++i) {
const marker = new google.maps.Marker({
position: {
lat: bounds.south + latSpan * Math.random(),
lng: bounds.west + lngSpan * Math.random()
},
map: map
});
attachSecretMessage(marker, secretMessages[i]);
}
} // Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
const infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener("click", () => {
infowindow.open(marker.get("map"), marker);
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
const bounds = {
north: -25.363882,
south: -31.203405,
east: 131.044922,
west: 125.244141
}; // Display the area between the location southWest and northEast.
map.fitBounds(bounds); // Add 5 markers to map at random locations.
// For each of these markers, give them a title with their index, and when
// they are clicked they should open an infowindow with text from a secret
// message.
const secretMessages = ["This", "is", "the", "secret", "message"];
const lngSpan = bounds.east - bounds.west;
const latSpan = bounds.north - bounds.south;
for (let i = 0; i < secretMessages.length; ++i) {
const marker = new google.maps.Marker({
position: {
lat: bounds.south + latSpan * Math.random(),
lng: bounds.west + lngSpan * Math.random()
},
map: map
});
attachSecretMessage(marker, secretMessages[i]);
}
} // Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
const infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener("click", () => {
infowindow.open(marker.get("map"), marker);
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Closures in Event Listeners</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
Create a starter application from sample
A skeleton starter application using TypeScript, Webpack, and Babel can be generated from this sample using one of the methods below.
Run Locally
Node.js is required to run this sample locally. Follow these instructions to install Node.js and NPM.
npm i -g '@googlemaps/js-samples'googlemaps-js-samples init event-closure DESTINATION_FOLDER
Run in Google Cloud Shell
Google Cloud Shell is an interactive shell environment for Google Cloud Platform that makes it easy for you to learn and experiment with GCP and manage your projects and resources from your web browser.
Run in Cloud Shell