以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

最大ズーム画像サービス

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

概要

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

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

MaxZoom リクエスト

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

MaxZoomService へのリクエストを開始するには、単純に getMaxZoomAtLatLng() を呼び出して、場所の LatLng とリクエストの完了時に実行するコールバック関数を渡します。

MaxZoom レスポンス

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

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

status コードは以下のいずれかの値を返します。

  • OK は、サービスが衛星画像の最大ズームレベルを見つけたことを示します。
  • ERROR は、MaxZoom リクエストを処理できなかったことを示します。

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

var map;
var maxZoomService;
var 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, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(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>
var map;
var maxZoomService;
var 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, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

例を見る(maxzoom-simple.html)

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。