描画レイヤ（ライブラリ）

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

  • DrawingManager の drawingMode プロパティは、DrawingManager の初期描画状態を定義します。値は google.maps.drawing.OverlayType 定数で指定します。デフォルト設定は null で、この場合 DrawingManager の初期化時のカーソルは非描画モードです。
  • DrawingManager の drawingControl プロパティは、地図上の描画ツール選択インターフェースの表示設定を定義します。値はブール値で指定します。
  • DrawingManager の drawingControlOptions プロパティを使用して、コントロールの位置と、コントロール内に表示するオーバーレイのタイプを定義します。
    • position は、地図上の描画コントロールの位置を定義します。値は google.maps.ControlPosition 定数で指定します。
    • drawingModes は google.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);
}

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

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);
}

window.initMap = initMap;
index.js
サンプルを表示

サンプルを試す

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

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} は、circlecomplete、polygoncomplete などのオーバーレイ タイプを表します）。オーバーレイの参照が引数として渡されます。
  • 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();
  }
});

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