以上で完了です。

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

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

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

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

スクロールとパンの動作

MapOptions オブジェクトの gestureHandling オプションを使用すると、モバイル端末に表示されたマップのパンとスクロールの動作を制御できます。

次の例では、cooperative 操作処理を使用しています。モバイル端末でデモを表示して、このコードの実際の動作を確認してください。

/**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<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>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Cooperative Gesture Handling</title>
    <style>
      /* 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>
  </head>

  <body>
    <div id="map"></div>
    <script>

      /**
       * This sample sets the gesture handling mode to 'cooperative',
       * which means that on a mobile device, the user must swipe with one
       * finger to scroll the page and two fingers to pan the map.
       */
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: 'cooperative'
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

操作処理

モバイルウェブでは、ページをスクロールしようとスワイプしたのにマップのパン操作が実行されて、ユーザーを不快にさせることがあります。

Google Maps JavaScript API では、MapOptions オブジェクトで gestureHandling オプションを提供しています。これは、ユーザーにとって操作しやすいマップを作成する上で役に立ちます。使用できる値は次のとおりです。

  • greedy: ユーザーが画面をスワイプ(画面上でドラッグ)するたびにマップのパン操作(上下左右)を行います。つまり 1 本指でも 2 本指でも、スワイプするとマップのパン操作を行います。
  • cooperative: ページのスクロールは 1 本指、マップのパン操作は 2 本指でスワイプする必要があります。ユーザーが 1 本指でスワイプすると、マップ上にオーバーレイが表示され、マップを移動するには 2 本指を使用するよう促します。モバイル端末で上記のサンプルを表示して、cooperative モードの実際の動作を確認してください。
  • none: マップはパン操作もピンチ操作も無効です。
  • auto(既定値): ページがスクロール可能かどうかに応じて、cooperativegreedy のどちらかの動作が適用されます。詳細: auto を指定すると、API は次の動作を選択します。
    • cooperative。ページのボディがウィンドウよりも大きい、または API がページのサイズを判断できない場合(例: ページが iframe 内に存在する)。
    • greedy。ページのボディがウィンドウよりも小さく、ユーザーのスクロールが不要と判断できる場合。

モバイル端末ではデフォルトで全画面表示コントロールが表示されるため、ユーザーは容易にマップを拡大できます。マップが全画面モードになると、1 本または 2 本の指でマップのパン操作を行えます。注: iOS は全画面機能をサポートしていないため、iOS 端末では全画面表示コントロールは表示されません。

イベント

API は、ユーザーがマップをスクロール(ドラッグ)したときは、特に次のイベントを発行します。

  • drag: ユーザーがマップをドラッグしているときに繰り返し発行されます。
  • dragstart: ユーザーがマップのドラッグを開始すると発行されます。
  • dragend: ユーザーがマップのドラッグを終了すると発行されます。

詳細については、イベントのガイドリファレンスをご覧ください。

制限事項

gestureHandling オプションで使用できる動作には、次の制限が適用されます。

  • タップ対応端末限定: gestureHandling オプションは、タップ インターフェースをサポートする端末でページを表示している場合にのみ適用されます。
  • タップイベント限定: gestureHandling オプションは、マウスイベントやペンイベントには適用されません。
  • ログイン対応のマップは対象外: gestureHandling オプションはログインが有効なマップには適用されません。
  • ストリートビューは対象外: gestureHandling オプションはストリートビュー サービスには適用されません。

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

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