Click here to see your recently viewed pages and most viewed pages.
Hide
Google Maps JavaScript API v3

Overlaying an image map type

View this example full screen.

JavaScript
var map;
function initialize() {
  var mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(37.78313383212, -122.4039494991302)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var bounds = {
    17: [[20969, 20970], [50657, 50658]],
    18: [[41939, 41940], [101315, 101317]],
    19: [[83878, 83881], [202631, 202634]],
    20: [[167757, 167763], [405263, 405269]]
  };

  var imageMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      if (zoom < 17 || zoom > 20 ||
          bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
          bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
        return null;
      }

      return ['http://www.gstatic.com/io2010maps/tiles/5/L2_',
          zoom, '_', coord.x, '_', coord.y, '.png'].join('');
    },
    tileSize: new google.maps.Size(256, 256)
  });

  map.overlayMapTypes.push(imageMapType);

}

google.maps.event.addDomListener(window, 'load', initialize);
JavaScript + HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Overlaying an image map type</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(37.78313383212, -122.4039494991302)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var bounds = {
    17: [[20969, 20970], [50657, 50658]],
    18: [[41939, 41940], [101315, 101317]],
    19: [[83878, 83881], [202631, 202634]],
    20: [[167757, 167763], [405263, 405269]]
  };

  var imageMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      if (zoom < 17 || zoom > 20 ||
          bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
          bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
        return null;
      }

      return ['http://www.gstatic.com/io2010maps/tiles/5/L2_',
          zoom, '_', coord.x, '_', coord.y, '.png'].join('');
    },
    tileSize: new google.maps.Size(256, 256)
  });

  map.overlayMapTypes.push(imageMapType);

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>