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

  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&loading=async&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 イベントが無効になります。