You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Ground Overlays

  1. Introduction
  2. Add a ground overlay
  3. 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.

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

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

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

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<div id="map"></div>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

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

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

View example (groundoverlay-simple.html).

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 simply 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.

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

View example (overlay-remove.html).

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.