描画レイヤ(ライブラリ)

  1. 概要
  2. ライブラリの使用
  3. DrawingManager のオプション
  4. 描画ツール コントロールの更新
  5. 描画イベント

概要

DrawingManager クラスは、地図上にポリゴン、矩形、ポリライン、円、マーカーを描画するためのグラフィカル ユーザー インターフェースを提供します。

ライブラリの使用

描画ツールは、メインの Maps API JavaScript のコードとは別の独立したライブラリです。このライブラリにある機能を利用するには、最初に Maps API ブートストラップ URL の libraries パラメータを使用してライブラリを読み込む必要があります。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

ライブラリ パラメータを追加したら、次のように DrawingManager オブジェクトを作成できます。

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

DrawingManager のオプション

DrawingManager コンストラクタには、表示するコントロール一式、コントロールの位置、初期描画状態を定義するオプションを指定します。

  • DrawingManagerdrawingMode プロパティは、DrawingManager の初期描画状態を定義します。値は google.maps.drawing.OverlayType 定数で指定します。デフォルト設定は null で、この場合 DrawingManager の初期化時のカーソルは非描画モードです。
  • DrawingManagerdrawingControl プロパティは、地図上の描画ツール選択インターフェースの表示設定を定義します。値はブール値で指定します。
  • DrawingManagerdrawingControlOptions プロパティを使用して、コントロールの位置と、コントロール内に表示するオーバーレイのタイプを定義します。
    • position は、地図上の描画コントロールの位置を定義します。値は google.maps.ControlPosition 定数で指定します。
    • drawingModesgoogle.maps.drawing.OverlayType 定数の配列です。描画コントロールのシェイプ選択ツールに含めるオーバーレイ タイプを定義します。なお、ハンドアイコンは常時表示されるので、ユーザーは描画をしなくても地図を操作できます。コントロール内に表示されるツールの並び順は、配列で宣言されている順番と同じです。
  • 各タイプのオーバーレイにデフォルト プロパティのセットを割り当てると、オーバーレイが最初に作成された時点での外観を定義できます。これは、オーバーレイの {overlay}Options プロパティで定義します({overlay} はオーバーレイのタイプを表します)。たとえば、円を塗りつぶすプロパティやストロークのプロパティ、zIndex、クリック可否は circleOptions プロパティで定義できます。サイズや位置、地図の値が渡された場合は、すべて無視されます。 設定可能なプロパティの全詳細については、API リファレンス ドキュメントをご覧ください。

注: 作成したシェイプをユーザー編集可能にする場合は、その editable プロパティを true に設定します。

TypeScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

JavaScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}
サンプルを表示
// この例では描画ライブラリが必要です。最初に API を読み込む際に // libraries=drawing パラメータを含めます。例は次のとおりです。 // <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=drawing"> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); }
/* 常に地図の高さを明示的に設定して、地図を含む div * 要素のサイズを定義します。*/ #map { height: 100%; } /* 省略可: サンプルページをウィンドウ全体に表示します。*/ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Drawing Tools</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle は css と js を挿入します --> </head> <body> <div id="map"></div> <!-- 非同期スクリプトはすぐに実行され、コールバックで使用される DOM 要素の後に配置する必要があります。--> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=drawing&v=weekly&channel=2" async ></script> </body> </html>

サンプルを試す

描画ツール コントロールの更新

DrawingManager オブジェクトを作成したら、setOptions() を呼び出して新しい値を渡すことで、このオブジェクトを更新できます。

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

描画ツール コントロールを非表示にする、または表示する方法は次のとおりです。

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

描画ツール コントロールを map オブジェクトから削除する方法は次のとおりです。

drawingManager.setMap(null);

描画ツール コントロールを「非表示」に設定した場合、画面には表示されなくなりますが、DrawingManager クラスの機能はそのまますべて利用できます。この場合、必要に応じて、独自のコントロールを実装できます。map オブジェクトから DrawingManager を削除すると、描画機能がすべて無効になります。描画機能を復元する場合は、drawingManager.setMap(map) か新規に作成した DrawingManager を使って、地図に貼り付け直す必要があります。

描画イベント

シェイプ オーバーレイが作成されると、次の 2 つのイベントが発生します。

  • {overlay}complete イベント({overlay} は、circlecompletepolygoncomplete などのオーバーレイ タイプを表します)。オーバーレイの参照が引数として渡されます。
  • overlaycomplete イベント。OverlayType を格納するオブジェクト リテラルと、オーバーレイの参照が引数として渡されます。
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

なお、地図への描画中は、clickmousemove などの google.maps.Map イベントが無効になります。