Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/groundoverlay.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/overlays.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/groundoverlays.md.txt "View this page for the JavaScript platform docs.")

1. [Introduction](https://developers.google.com/maps/documentation/javascript/groundoverlays.md.txt#introduction)
2. [Add a ground overlay](https://developers.google.com/maps/documentation/javascript/groundoverlays.md.txt#add)
3. [Remove a ground overlay](https://developers.google.com/maps/documentation/javascript/groundoverlays.md.txt#remove)

## 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](https://developers.google.com/maps/documentation/javascript/overlays.md.txt).

## Add a ground overlay

The constructor for a
[`GroundOverlay`](https://developers.google.com/maps/documentation/javascript/reference.md.txt#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

```typescript
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
```

> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.

### JavaScript

```javascript
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
```

> [!NOTE]
> **Note:** The JavaScript is compiled from the TypeScript snippet.

[View example](https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple.md.txt)

## 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`.

```javascript
function removeOverlay() {
  historicalOverlay.setMap(null);
}
```

[View example](https://developers.google.com/maps/documentation/javascript/examples/overlay-remove.md.txt)