以上で完了です。

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

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

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

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

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

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

概要

DrawingManager クラスが提供するグラフィカル インターフェースを使うと、ユーザーはポリゴンや長方形、ポリライン、円、マーカーなどを地図上に描画できます。

ライブラリを使用する

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

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

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

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

DrawingManager のオプション

DrawingManager コンストラクタは、表示するコントロールのセットやコントロールの配置、描画ステートの初期値を定義するオプションのセットを受け取ります。

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

注: 作成済みの図形を、後からユーザーが編集できるようにするには、editable プロパティを true に設定します。

// 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() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', '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 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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// 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() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', '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);
}

例を見る(drawing-tools.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 のイベントが無効になることに注意してください。

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

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