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 aGroundOverlayobject.
The constructor for aGroundOverlayspecifies a URL of an image
and theLatLngBoundsof 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;
// 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;
To remove an overlay from a map, call the overlay'ssetMap()method, passingnull. 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 tonull.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-11-14 UTC."],[],["Ground overlays, images tied to latitude/longitude coordinates, are added to a map using the `GroundOverlay` constructor, specifying an image URL and `LatLngBounds`. The `setMap()` method then renders the image. Removing an overlay involves calling `setMap(null)` on the overlay object, which detaches it from the map but doesn't delete it. To delete the overlay it needs to be set to null. Example code is provided in TypeScript and JavaScript.\n"]]
