Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Removing Overlays

Spark icon

Page Summary

This example demonstrates how to overlay an image on a map using the Google Maps JavaScript API.
It provides UI controls (buttons) to dynamically remove and restore the image overlay.
The sample code is available in both JavaScript and TypeScript, allowing developers to choose their preferred language.
Users can interact with the sample via JSFiddle or Google Cloud Shell, or clone the repository to run it locally.

This example creates a ground overlay on top of a map, and adds a UI control allowing users to remove the ground overlay from the map.

Read the documentation.

[フレーム]

TypeScript

// This example adds a UI control allowing users to remove the
// ground overlay from the map.
lethistoricalOverlay:google.maps.GroundOverlay;
letmap:google.maps.Map;
functioninitMap():void{
map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{
zoom:13,
center:{lat:40.74,lng:-74.18},
});
constimageBounds={
north:40.773941,
south:40.712216,
east:-74.12544,
west:-74.22655,
};
historicalOverlay=newgoogle.maps.GroundOverlay(
"https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
imageBounds
);
// add event listener for click event
document
.getElementById("restore-overlay")!
.addEventListener("click",restoreOverlay);
document
.getElementById("remove-overlay")!
.addEventListener("click",removeOverlay);
// restore overlay to map
restoreOverlay();
}
functionrestoreOverlay(){
historicalOverlay.setMap(map);
}
functionremoveOverlay(){
historicalOverlay.setMap(null);
}
declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;index.ts

JavaScript

// This example adds a UI control allowing users to remove the
// ground overlay from the map.
lethistoricalOverlay;
letmap;
functioninitMap(){
map=newgoogle.maps.Map(document.getElementById("map"),{
zoom:13,
center:{lat:40.74,lng:-74.18},
});
constimageBounds={
north:40.773941,
south:40.712216,
east:-74.12544,
west:-74.22655,
};
historicalOverlay=newgoogle.maps.GroundOverlay(
"https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
imageBounds,
);
// add event listener for click event
document
.getElementById("restore-overlay")
.addEventListener("click",restoreOverlay);
document
.getElementById("remove-overlay")
.addEventListener("click",removeOverlay);
// restore overlay to map
restoreOverlay();
}
functionrestoreOverlay(){
historicalOverlay.setMap(map);
}
functionremoveOverlay(){
historicalOverlay.setMap(null);
}
window.initMap=initMap;index.js

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;
}
#floating-panel{
position:absolute;
top:10px;
left:25%;
z-index:5;
background-color:#fff;
padding:5px;
border:1pxsolid#999;
text-align:center;
font-family:"Roboto","sans-serif";
line-height:30px;
padding-left:10px;
}
style.css

HTML

<html>
 <head>
 <title>Removing Overlays</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 </head>
 <body>
 <div id="floating-panel">
 <input id="remove-overlay" type="button" value="Remove overlay" />
 <input id="restore-overlay" type="button" value="Restore overlay" />
 </div>
 <div id="map"></div>
 <!-- 
 The `defer` attribute causes the script to execute after the full HTML
 document has been parsed. For non-blocking uses, avoiding race conditions,
 and consistent behavior across browsers, consider loading using Promises. See
 https://developers.google.com/maps/documentation/javascript/load-maps-js-api
 for more information.
 -->
 <script
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
 defer
 ></script>
 </body>
</html>index.html

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclone-bsample-overlay-removehttps://github.com/googlemaps/js-samples.git
cdjs-samples
npmi
npmstart

Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.

gitcheckoutsample-SAMPLE_NAME
npmi
npmstart