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.

Ground Overlays

Spark icon

Page Summary

Ground overlays let you place images on a map tied to latitude/longitude coordinates.
You can add a ground overlay using the GroundOverlay object, specifying the image URL and boundaries.
To remove a ground overlay from the map, call setMap(null) on the overlay object.
Removing an overlay from the map doesn't delete it; to delete it, set the overlay object to null after removing it from the map.

Select platform: Android iOS JavaScript

Introduction
Add a ground overlay
Remove a ground overlay

Introduction

Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. If you want to place an image on a map, you can use a GroundOverlay object.

For information on other types of overlay, see Drawing on the map.

Add a ground overlay

The constructor for a GroundOverlay specifies a URL of an image and the LatLngBounds of the image as parameters. The image will be rendered on the map, constrained to the given bounds, and conformed using the map's projection.

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
lethistoricalOverlay;
functioninitMap():void{
constmap=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
);
historicalOverlay.setMap(map);
}
declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;index.ts

JavaScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
lethistoricalOverlay;
functioninitMap(){
constmap=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,
);
historicalOverlay.setMap(map);
}
window.initMap=initMap;index.js

View example

Remove a ground overlay

To remove an overlay from a map, call the overlay's setMap() method, passing null. Note that calling this method does not delete the overlay. It removes the overlay from the map. If instead you wish to delete the overlay, you should remove it from the map, and then set the overlay itself to null.

functionremoveOverlay(){
historicalOverlay.setMap(null);
}