Maximum Zoom Imagery Service

1. Maximum Zoom Imagery
2. MaxZoom Requests
3. MaxZoom Responses

Overview

The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18, for example. Satellite imagery varies more widely as this imagery is not generated, but directly photographed.

Because satellite imagery is not always available at high zoom levels for remote locations — sparsely populated areas or open ocean areas — you may want to know the highest zoom level for imagery at a given location beforehand. The MaxZoomService object provides a simple interface for discovering the maximum zoom level at a given location for which Google Maps has satellite imagery.

MaxZoom Requests

Accessing the MaxZoomService is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method should process the result.

To initiate a request to the MaxZoomService, call getMaxZoomAtLatLng(), passing the LatLng of the location and a callback function to execute upon completion of the request.

MaxZoom Responses

When getMaxZoomAtLatLng() executes the callback function, it will pass back two parameters:

• status contains the MaxZoomStatus of the request.
• zoom contains the zoom level. If for some reason the service fails, this value will not be present.

The status code may return one of the following values:

• OK indicates that the service found the maximum zoom level for satellite imagery.
• ERROR indicates that the MaxZoom request could not be processed.

The following example shows a map of metropolitan Tokyo. Clicking anywhere on the map indicates the maximum zoom level at that location. (Zoom levels around Tokyo generally vary between zoom levels 18 and 21.)

let map: google.maps.Map;
let maxZoomService: google.maps.MaxZoomService;
let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 11,
    center: { lat: 35.6894, lng: 139.692 },
    mapTypeId: "hybrid",
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener("click", showMaxZoom);
}

function showMaxZoom(e: google.maps.MapMouseEvent) {
  maxZoomService.getMaxZoomAtLatLng(
    e.latLng as google.maps.LatLng,
    (result: google.maps.MaxZoomResult) => {
      if (result.status !== "OK") {
        infoWindow.setContent("Error in MaxZoomService");
      } else {
        infoWindow.setContent(
          "The maximum zoom at this location is: " + result.zoom
        );
      }

      infoWindow.setPosition(e.latLng);
      infoWindow.open(map);
    }
  );
}

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

let map;
let maxZoomService;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 35.6894, lng: 139.692 },
    mapTypeId: "hybrid",
  });
  infoWindow = new google.maps.InfoWindow();
  maxZoomService = new google.maps.MaxZoomService();
  map.addListener("click", showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, (result) => {
    if (result.status !== "OK") {
      infoWindow.setContent("Error in MaxZoomService");
    } else {
      infoWindow.setContent(
        "The maximum zoom at this location is: " + result.zoom,
      );
    }

    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

window.initMap = initMap;
index.js