最大ズーム画像サービス

  1. 最大ズーム画像
  2. MaxZoom リクエスト
  3. MaxZoom レスポンス

概要

Google Maps API では、地図タイプの画像にさまざまなズームレベルの地図タイルを使用できます。たとえば、大部分の道路地図は 0 から 18 のズームレベルで利用可能です。衛星画像はより幅広く変化します。この画像は生成されたものではなく、直接撮影されたものであるからです。

人口の希薄な地域や広い海洋地域などの遠隔地では高ズームレベルの衛星画像が提供されていない場合があるため、所定の場所を表示する画像の最高ズームレベルを事前に知っておくことが望ましいでしょう。Google マップの航空写真が存在する特定の場所の最大ズームレベルを調べるには、MaxZoomService オブジェクトが提供するシンプルなインターフェースを使用します。

MaxZoom リクエスト

MaxZoomService へのアクセスは、Google Maps API が外部サーバーへの呼び出しを行う必要があるため、非同期に行われます。このため、コールバック メソッドを渡してリクエストの完了時に実行する必要があります。このコールバック メソッドが結果を処理する必要があります。

MaxZoomService にリクエストを実行するには、getMaxZoomAtLatLng() を呼び出し、その地点の LatLng と、リクエストの完了時に実行するコールバック関数を渡します。

MaxZoom レスポンス

getMaxZoomAtLatLng() が「コールバック」関数を実行すると、次の 2 つのパラメータが返されます。

  • status には、リクエストの MaxZoomStatus が格納されています。
  • zoom にはズームレベルが格納されます。なんらかの理由でサービスが失敗した場合、この値は存在しません。

status コードとして次の値のうちのいずれかが返されます。

  • OK は、航空写真の最大ズームレベルを検出したことを示します。
  • ERROR は、MaxZoom リクエストを処理できなかったことを示します。

次の例は、東京都市部の地図を示しています。地図上の任意の場所をクリックすると、その場所の最大ズームレベルが示されます（東京周辺のズームレベルは、概してズームレベル 18～21 の間で変化します）。

TypeScript

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

JavaScript

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
サンプルを表示

サンプルを試す