図形

  1. はじめに
  2. ポリライン
    1. ポリラインを追加する
    2. ポリラインを除去する
    3. ポリラインを検査する
    4. ポリラインをカスタマイズする
  3. ポリゴン
    1. ポリゴンを追加する
    2. ポリゴンを除去する
    3. ポリゴンを検査する
  4. 長方形
    1. 長方形を追加する
    2. 長方形を除去する
    1. 円を追加する
    2. 円を除去する
  5. ユーザーによる編集とドラッグが可能な図形
    1. 図形を編集可能にする
    2. 図形をドラッグ可能にする
    3. 編集イベントをリッスンする
    4. ドラッグ イベントをリッスンする

はじめに

さまざまな図形をマップに追加できます。図形はマップ上のオブジェクトであり、緯度/経度座標と紐付けされています。ラインポリゴン長方形などの図形を使用できます。また、ユーザーが編集またはドラッグできるように図形を設定できます。

ポリライン

マップ上にラインを描画するには、ポリラインを使用します。 Polyline クラスは、マップ上で接続しているライン セグメントの直線オーバーレイを定義します。Polyline オブジェクトは LatLng 位置の配列で構成され、これらの位置を指定された順序で接続する一連のライン セグメントを作成します。

ポリラインを追加する

Polyline コンストラクタでは、ラインの LatLng 座標を指定する一連の PolylineOptions と、ポリラインの視覚動作を調節する一連のスタイルを指定します。

Polyline オブジェクトは、マップ上の一連の直線セグメントとして描画します。ラインの構成時に PolylineOptions 内で、ライン ストロークの色、太さ、および不透明度をカスタムで指定できます。または、構成後にこれらのプロパティを変更できます。ポリラインは、次のストローク スタイルをサポートします。

  • strokeColor は、"#FFFFFF" 形式の 16 進数 HTML カラーを指定します。Polyline クラスでは色名はサポートされません。
  • strokeOpacity は、ラインの色の不透明度を決定する 0.01.0 の間の数値を指定します。デフォルト値は 1.0 です。
  • strokeWeight は、ラインの幅をピクセル単位で指定します。

ポリラインの editable プロパティは、ユーザーが図形を編集できるかどうかを指定します。下記のユーザーによる編集が可能な図形をご覧ください。同様に、draggable プロパティを設定して、ユーザーにラインのドラッグを許可できます。

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

例を見る(polyline-simple.html)

ポリラインを除去する

マップからポリラインを除去するには、setMap() メソッドを呼び出して引数として null を渡します。次の例では、flightPath はポリライン オブジェクトです。

flightPath.setMap(null);

上記のメソッドでは、ポリラインは削除されないことに注意してください。マップからポリラインが除去されるだけです。ポリラインを削除する場合は、ポリラインをマップから除去して、そのポリライン自体を null に設定します。

例を見る(polyline-remove.html)

ポリラインを検査する

ポリラインは、一連の座標を LatLng オブジェクトの配列として指定します。これらの座標はラインのパスを決定します。座標を取得するには getPath() を呼び出します。これは、MVCArray タイプの配列を返します。次の操作を使用して、この配列を操作および検査できます。

  • getAt() は、指定されたゼロベースのインデックス値の位置の LatLng を返します。
  • insertAt() は、渡された LatLng を指定されたゼロベースのインデックス値に挿入します。そのインデックス値の既存の座標は、先送りになります。
  • removeAt() は、指定されたゼロベースのインデックス値の位置の LatLng を削除します。
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

例を見る(polyline-complex.html)

ポリラインをカスタマイズする

シンボルの形態のベクター ベースの画像を、ポリラインに追加できます。シンボルと PolylineOptions クラスの組み合わせにより、マップ上のポリラインのルック アンド フィールに対する多様な制御が可能になります。Symbols をご覧いただき、矢印破線カスタム シンボル および アニメーション付きシンボルの詳細についてご確認ください。

ポリゴン

ポリゴンは閉じられたパス(またはループ)により囲まれた領域を表し、一連の座標により定義されます。Polygon オブジェクトは、指定された順序の一連の座標で構成されている点で Polyline オブジェクトと似ています。ポリゴンは、ストロークと塗りつぶしにより描画されます。ポリゴンの縁(ストローク)の色、太さおよび不透明度、および閉じられた領域(塗りつぶし)の色と不透明度をカスタムで定義できます。色は 16 進数の HTML 形式で示されます。色名はサポートされません。

Polygon オブジェクトは、次のような複雑な図形を描画できます。

  • 単一のポリゴンで定義される、複数の隣接しない領域。
  • 中に穴がある領域。
  • 1 つ以上の領域の共通部分。

複雑な図形を定義するには、複数のパスを持つポリゴンを使用します。

ポリゴンを追加する

ポリゴンの領域には複数の個別のパスが含まれている場合があるため、Polygon オブジェクトの paths プロパティでは MVCArray タイプの各配列の配列を指定します。各配列では、順序が指定された一連の LatLng 座標が個別に定義されます。

1 つのパスのみで構成される単純なポリゴンの場合、単一の LatLng 座標配列を使用して Polygon を構成できます。Google Maps JavaScript API は、構成時にこの単純な配列を paths プロパティに格納する際、配列の配列に変換します。1 つのパスで構成されるポリゴン用に、API では単純な getPath() メソッドが用意されています。

ポリゴンの editable プロパティは、ユーザーが図形を編集できるかどうかを指定します。下記のユーザーによる編集が可能な図形をご覧ください。同様に、draggable プロパティを設定して、ユーザーに図形のドラッグを許可できます。

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

例を見る(polygon-simple.html)

ポリゴンの自動完成

上記の例の Polygon は、4 セットの LatLng 座標で構成されていますが、最初と最後のセットは同じ位置を定義し、ループを完成しています。しかし、実際は、ポリゴンは閉じられた領域を定義するため、最後の座標セットを定義する必要はありません。Google Maps JavaScript API は、任意の指定されたパスについて、最後の場所から最初の場所に接続するストロークを描画して、自動的にポリゴンを完成します。

次の例は前の例と同じですが、最後の LatLng が省略されている点が異なります。例を見る(polygon-autoclose.html)

ポリゴンを除去する

マップからポリゴンを除去するには、setMap() メソッドを呼び出して引数として null を渡します。次の例では、bermudaTriangle はポリゴン オブジェクトです。

bermudaTriangle.setMap(null);

上記のメソッドでは、ポリゴンは削除されないことに注意してください。マップからポリゴンが除去されるだけです。ポリゴンを削除する場合は、ポリゴンをマップから除去して、そのポリゴン自体を null に設定します。

ポリゴンを検査する

ポリゴンは、MVCArray タイプの各配列の配列として一連の座標を指定します。各「リーフ」配列は、単一のパスを指定する LatLng 座標の配列です。これらの座標を取得するには、Polygon オブジェクトの getPaths() メソッドを呼び出します。配列は MVCArray なので、次の操作を使用してこの配列を操作および検査する必要があります。

  • getAt() は、指定されたゼロベースのインデックス値の位置の LatLng を返します。
  • insertAt() は、渡された LatLng を指定されたゼロベースのインデックス値に挿入します。そのインデックス値の既存の座標は、先送りになります。
  • removeAt() は、指定されたゼロベースのインデックス値の位置の LatLng を削除します。
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

例を見る(polygon-arrays.html)

長方形

汎用の Polygon クラスに加え、Google Maps JavaScript API には構成を簡素化するために Rectangle オブジェクト用の特別なクラスが含まれています。

長方形を追加する

長方形の縁(ストローク)の色、太さおよび不透明度、および長方形内(塗りつぶし)の色と不透明度をカスタムで定義できる点で、RectanglePolygon と似ています。色は 16 進数の HTML スタイルで示す必要があります。

Polygon とは異なり、Rectanglepaths を定義しません。その代り、長方形には bounds プロパティがあります。これは、長方形の google.maps.LatLngBounds を指定することで図形を定義します。

長方形の editable プロパティは、ユーザーが図形を編集できるかどうかを指定します。下記のユーザーによる編集が可能な図形をご覧ください。同様に、draggable プロパティを設定して、ユーザーに長方形のドラッグを許可できます。

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

例を見る(rectangle-simple.html)

次のコードは、ユーザーがマップのズームを変更するたびに長方形を作成します。長方形のサイズは、ビューポートにより決定されます。

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

例を見る(rectangle-zoom.html)

長方形を除去する

マップから長方形を除去するには、setMap() メソッドを呼び出して引数として null を渡します。

rectangle.setMap(null);

上記のメソッドでは、長方形は削除されないことに注意してください。マップから長方形が除去されるだけです。長方形を削除する場合は、長方形をマップから除去して、その長方形自体を null に設定します。

汎用の Polygon クラスに加え、Google Maps JavaScript API には構成を簡素化するために Circle オブジェクト用の特別なクラスが含まれています。

円を追加する

円の縁(ストローク)の色、太さおよび不透明度、および円内(塗りつぶし)の色と不透明度をカスタムで定義できる点で、CirclePolygon と似ています。色は 16 進数の HTML スタイルで示す必要があります。

Polygon とは異なり、Circlepaths を定義しません。その代り、円にはその形状を定義する 2 つのプロパティがあります。

  • center は、円の中心の google.maps.LatLng を指定します。
  • radius は、円の半径をメートル単位で指定します。

円の editable プロパティは、ユーザーが図形を編集できるかどうかを指定します。下記のユーザーによる編集が可能な図形をご覧ください。同様に、draggable プロパティを設定して、ユーザーに円のドラッグを許可できます。

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

例を見る(circle-simple.html)

円を除去する

マップから円を除去するには、setMap() メソッドを呼び出して引数として null を渡します。

circle.setMap(null);

上記のメソッドでは、円は削除されないことに注意してください。マップから円が除去されるだけです。円を削除する場合は、円をマップから除去して、その円自体を null に設定します。

ユーザーによる編集とドラッグが可能な図形

図形を編集可能にすると、ハンドルが追加されます。ユーザーは、そのハンドルを使用して図形の移動、形状の変更、およびサイズの変更をマップ上で直接行うことができます。また、ユーザーが図形をマップ上の別のプレイスに移動できるように、図形をドラッグ可能にすることができます。

ユーザーが行ったオブジェクトの変更は、セッション間で保持されません。ユーザーの編集を保存する場合は、アプリケーションで情報をキャプチャして保存する必要があります。

図形を編集可能にする

任意の図形(ポリライン、ポリゴン、円および長方形)は、図形のオプションで editabletrue に設定することでユーザーによる編集を可能に設定できます。

  var bounds = {
    north: 44.599,
    south: 44.490,
    east: -78.443,
    west: -78.649
  };

  // Define a rectangle and set its editable property to true.
  var rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true
  });

例を見る(user-editable-shapes.html)

図形をドラッグ可能にする

デフォルトでは、マップ上に描画された図形の位置は固定されています。ユーザーが図形をマップ上の別の場所にドラッグできるようにするには、図形のオプションで draggabletrue に設定します。

  var redCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Construct a draggable red triangle with geodesic set to true.
  new google.maps.Polygon({
    map: map,
    paths: redCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
  });

ポリゴンまたはポリラインのドラッグを有効にする場合、その geodesic プロパティを true に設定して、ポリゴンまたはポリラインを測地的にすることを検討する必要があります。

測地的なポリゴンは、移動された場合にその真の地理的な形状を保持します。そのため、メルカトル図法で北または南に移動すると、歪んで表示されます。非測地的ポリゴンの場合は、画面上のその最初の外観が常に保持されます。

測地的なポリラインでは、地球が球体であると仮定して、ポリラインのセグメントは地球表面上の 2 点間の最短経路として描画され、メルカトル図法上の直線とは異なります。

座標系の詳細については、マップタイプのドキュメントをご覧ください。

次のマップは、ほぼ同じサイズと外形の 2 つの三角形を示しています。赤い三角形は、その geodesic プロパティが true に設定されています。北に移動するとどのように形状が変化するか注目してください。

例を見る(polygon-draggable.html)

編集イベントをリッスンする

図形が編集されると、編集の完了時にイベントが発行されます。これらのイベントを以下に示します。

図形 イベント
radius_changed
center_changed
ポリゴン insert_at
remove_at
set_at

ポリゴンのパス上にリスナを設定する必要があります。ポリゴンに複数のパスがある場合、それぞれのパス上にリスナを設定する必要があります。

ポリライン insert_at
remove_at
set_at

ポリラインのパス上にリスナを設定する必要があります。

長方形 bounds_changed

有用なコード スニペットを以下に示します。

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

長方形上の編集イベントの処理の例をご覧ください。例を見る(rectangle-event.html)

ドラッグ イベントをリッスンする

図形がドラッグされると、ドラッグ アクションの開始時と終了時、およびドラッグの実行中にイベントが発行されます。次のイベントが、ポリライン、ポリゴン、円、および長方形に対して発行されます。

イベント 説明
dragstart ユーザーが図形のドラッグを開始すると発行されます。
drag ユーザーが図形をドラッグしているときに繰り返し発行されます。
dragend ユーザーが図形のドラッグを終了すると発行されます。

イベントの処理の詳細については、イベントのドキュメントをご覧ください。

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

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