It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Custom Overlays

This example creates a custom overlay, containing a U.S. Geological Survey (USGS) image of the relevant area on the map.

Read the documentation.

JavaScript

// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;

/** Initialize the map and the custom overlay. */
function initMap() {
  /** @constructor */
  function USGSOverlay(bounds, image, map) {
    // Initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay.
    this.setMap(map);
  }

  USGSOverlay.prototype = new google.maps.OverlayView();

  /**
   * onAdd is called when the map's panes are ready and the overlay has been
   * added to the map.
   */
  USGSOverlay.prototype.onAdd = function() {
    var div = document.createElement("div");
    div.style.borderStyle = "none";
    div.style.borderWidth = "0px";
    div.style.position = "absolute";

    // Create the img element and attach it to the div.
    var img = document.createElement("img");
    img.src = this.image_;
    img.style.width = "100%";
    img.style.height = "100%";
    img.style.position = "absolute";
    div.appendChild(img);

    this.div_ = div;

    // Add the element to the "overlayLayer" pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  USGSOverlay.prototype.draw = function() {
    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    var overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    var sw = overlayProjection.fromLatLngToDivPixel(
      this.bounds_.getSouthWest()
    );
    var ne = overlayProjection.fromLatLngToDivPixel(
      this.bounds_.getNorthEast()
    );

    // Resize the image's div to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + "px";
    div.style.top = ne.y + "px";
    div.style.width = ne.x - sw.x + "px";
    div.style.height = sw.y - ne.y + "px";
  };

  /** The onRemove() method will be called automatically from the API if
   * we ever set the overlay's map property to 'null'.
   */
  USGSOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  };
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 62.323907, lng: -150.109291 },
    mapTypeId: "satellite"
  });

  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(62.281819, -150.287132),
    new google.maps.LatLng(62.400471, -150.005608)
  );

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage =
    "https://developers.google.com/maps/documentation/" +
    "javascript/examples/full/images/talkeetna.png";

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);
}

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;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Overlays</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Overlays</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/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;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        // This example creates a custom overlay called USGSOverlay, containing
        // a U.S. Geological Survey (USGS) image of the relevant area on the map.
        // Set the custom overlay object's prototype to a new instance
        // of OverlayView. In effect, this will subclass the overlay class therefore
        // it's simpler to load the API synchronously, using
        // google.maps.event.addDomListener().
        // Note that we set the prototype to an instance, rather than the
        // parent class itself, because we do not wish to modify the parent class.
        var overlay;
        /** Initialize the map and the custom overlay. */

        function initMap() {
          /** @constructor */
          function USGSOverlay(bounds, image, map) {
            // Initialize all properties.
            this.bounds_ = bounds;
            this.image_ = image;
            this.map_ = map; // Define a property to hold the image's div. We'll
            // actually create this div upon receipt of the onAdd()
            // method so we'll leave it null for now.

            this.div_ = null; // Explicitly call setMap on this overlay.

            this.setMap(map);
          }

          USGSOverlay.prototype = new google.maps.OverlayView();
          /**
           * onAdd is called when the map's panes are ready and the overlay has been
           * added to the map.
           */

          USGSOverlay.prototype.onAdd = function() {
            var div = document.createElement("div");
            div.style.borderStyle = "none";
            div.style.borderWidth = "0px";
            div.style.position = "absolute"; // Create the img element and attach it to the div.

            var img = document.createElement("img");
            img.src = this.image_;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.position = "absolute";
            div.appendChild(img);
            this.div_ = div; // Add the element to the "overlayLayer" pane.

            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
          };

          USGSOverlay.prototype.draw = function() {
            // We use the south-west and north-east
            // coordinates of the overlay to peg it to the correct position and size.
            // To do this, we need to retrieve the projection from the overlay.
            var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
            // in LatLngs and convert them to pixel coordinates.
            // We'll use these coordinates to resize the div.

            var sw = overlayProjection.fromLatLngToDivPixel(
              this.bounds_.getSouthWest()
            );
            var ne = overlayProjection.fromLatLngToDivPixel(
              this.bounds_.getNorthEast()
            ); // Resize the image's div to fit the indicated dimensions.

            var div = this.div_;
            div.style.left = sw.x + "px";
            div.style.top = ne.y + "px";
            div.style.width = ne.x - sw.x + "px";
            div.style.height = sw.y - ne.y + "px";
          };
          /** The onRemove() method will be called automatically from the API if
           * we ever set the overlay's map property to 'null'.
           */

          USGSOverlay.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
          };

          var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 11,
            center: {
              lat: 62.323907,
              lng: -150.109291
            },
            mapTypeId: "satellite"
          });
          var bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(62.281819, -150.287132),
            new google.maps.LatLng(62.400471, -150.005608)
          ); // The photograph is courtesy of the U.S. Geological Survey.

          var srcImage =
            "https://developers.google.com/maps/documentation/" +
            "javascript/examples/full/images/talkeetna.png"; // The custom USGSOverlay object contains the USGS image,
          // the bounds of the image, and a reference to the map.

          overlay = new USGSOverlay(bounds, srcImage, map);
        }

        exports.initMap = initMap;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
(function(exports) { "use strict"; // This example creates a custom overlay called USGSOverlay, containing // a U.S. Geological Survey (USGS) image of the relevant area on the map. // Set the custom overlay object's prototype to a new instance // of OverlayView. In effect, this will subclass the overlay class therefore // it's simpler to load the API synchronously, using // google.maps.event.addDomListener(). // Note that we set the prototype to an instance, rather than the // parent class itself, because we do not wish to modify the parent class. var overlay; /** Initialize the map and the custom overlay. */ function initMap() { /** @constructor */ function USGSOverlay(bounds, image, map) { // Initialize all properties. this.bounds_ = bounds; this.image_ = image; this.map_ = map; // Define a property to hold the image's div. We'll // actually create this div upon receipt of the onAdd() // method so we'll leave it null for now. this.div_ = null; // Explicitly call setMap on this overlay. this.setMap(map); } USGSOverlay.prototype = new google.maps.OverlayView(); /** * onAdd is called when the map's panes are ready and the overlay has been * added to the map. */ USGSOverlay.prototype.onAdd = function() { var div = document.createElement("div"); div.style.borderStyle = "none"; div.style.borderWidth = "0px"; div.style.position = "absolute"; // Create the img element and attach it to the div. var img = document.createElement("img"); img.src = this.image_; img.style.width = "100%"; img.style.height = "100%"; img.style.position = "absolute"; div.appendChild(img); this.div_ = div; // Add the element to the "overlayLayer" pane. var panes = this.getPanes(); panes.overlayLayer.appendChild(div); }; USGSOverlay.prototype.draw = function() { // We use the south-west and north-east // coordinates of the overlay to peg it to the correct position and size. // To do this, we need to retrieve the projection from the overlay. var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay // in LatLngs and convert them to pixel coordinates. // We'll use these coordinates to resize the div. var sw = overlayProjection.fromLatLngToDivPixel( this.bounds_.getSouthWest() ); var ne = overlayProjection.fromLatLngToDivPixel( this.bounds_.getNorthEast() ); // Resize the image's div to fit the indicated dimensions. var div = this.div_; div.style.left = sw.x + "px"; div.style.top = ne.y + "px"; div.style.width = ne.x - sw.x + "px"; div.style.height = sw.y - ne.y + "px"; }; /** The onRemove() method will be called automatically from the API if * we ever set the overlay's map property to 'null'. */ USGSOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; }; var map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 62.323907, lng: -150.109291 }, mapTypeId: "satellite" }); var bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608) ); // The photograph is courtesy of the U.S. Geological Survey. var srcImage = "https://developers.google.com/maps/documentation/" + "javascript/examples/full/images/talkeetna.png"; // The custom USGSOverlay object contains the USGS image, // the bounds of the image, and a reference to the map. overlay = new USGSOverlay(bounds, srcImage, map); } exports.initMap = initMap; })((this.window = this.window || {}));
/* 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; }
<!DOCTYPE html> <html> <head> <title>Custom Overlays</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>