シンボル（ベクターベースのアイコン）

  1. はじめに
  2. シンボルのプロパティ
  3. 定義済みのシンボル
  4. シンボルをマーカーに追加する
  5. シンボルをポリラインに追加する
  6. シンボルにアニメーションを付ける

はじめに

Symbol は、Marker または Polyline オブジェクトに表示できるベクターベースのアイコンです。シンボルの形状は、SVG のパス表記を使用したパスによって定義されます。Symbol オブジェクトの必須プロパティは path だけですが、ストロークや塗りつぶしの色や太さなど、視覚的な側面をカスタマイズするためのさまざまなプロパティもサポートされています。詳しくはプロパティの一覧をご覧ください。

いくつかの事前定義シンボルは、SymbolPath クラスを使用して追加できます。詳しくは下記の一覧をご覧ください。

シンボルのプロパティ

Symbol のデフォルトの動作は、マーカー上とポリライン上のどちらに表示するかによって少し異なります。これらの相違は、下記のプロパティの一覧で説明します。

Symbol は以下のプロパティをサポートしています。

  • path（必須）: シンボルの形状を定義するパスです。google.maps.SymbolPath の定義済みのパスを使用カスタムパスできます。また、SVG のパス表記を使用してカスタムパスを定義することもできます。注: ポリライン上のベクターパスは 22 x 22 ピクセルの正方形の中に収める必要があります。パスがこの正方形の外側のポイントを含む場合、シンボルの scale プロパティを 0.2 などの小数値に調節して、その結果の縮小されたポイントがこの正方形に収まるようにする必要があります。
  • anchor: シンボルの位置を、マーカーやポリラインからの相対位置で設定します。シンボルのパスの座標は、anchor の x および y 座標だけそれぞれ左および上に移動します。デフォルトでは、シンボルは (0, 0) に固定されます。この位置は、シンボルのパスと同じ座標系で表現されます。
  • fillColor: シンボル全体（つまりストロークで囲まれた領域）を塗りつぶす色です。名前付き拡張色を除くすべての CSS3 色に対応します。マーカー上のシンボルのデフォルト色は「黒」です。ポリライン上のシンボルの場合、デフォルトは対応するポリラインのストロークの色です。
  • fillOpacity: シンボルの塗りつぶしの相対的な不透明度（どのくらい透明でないか）を定義します。値の範囲は、0.0（完全に透過）から 1.0（完全に不透明）です。デフォルトは 0.0 です。
  • rotation: シンボルを回転させる角度です。時計回りの度数で表します。デフォルトでは、シンボル マーカーの回転は 0 であり、ポリライン上のシンボルは、そのシンボルの下にあるエッジの角度だけ回転します。ポリライン上のシンボルの回転を設定すると、シンボルの回転が固定され、ラインのカーブに追随しなくなります。
  • scale: シンボルのサイズが拡大 / 縮小する度合いを設定します。シンボル マーカーのデフォルトのスケールは 1 です。スケーリング後のシンボルのサイズに制限はありません。ポリライン上のシンボルの場合、デフォルトの scale はポリラインのストロークの幅です。拡大 / 縮小後は、シンボルは、シンボルのアンカーを中心とした 22 x 22 ピクセルの正方形内に収める必要があります。
  • strokeColor: シンボルの輪郭の色です。名前付き拡張色を除くすべての CSS3 色に対応します。マーカー上のシンボルの場合、デフォルトは「black」です。ポリライン上のシンボルの場合、デフォルトの色はポリラインのストローク色です。
  • strokeOpacity: シンボルのストロークの相対的な不透明度（どのくらい透明でないか）を定義します。値の範囲は、0.0（完全に透過）から 1.0（完全に不透明）です。シンボル マーカーのデフォルトは 1.0 です。ポリライン上のシンボルのデフォルトは、ポリラインのストロークの不透明度です。
  • strokeWeight: シンボルの輪郭の太さを定義します。デフォルトは、シンボルの scale プロパティです。

定義済みのシンボル

Google Maps JavaScript API には、SymbolPath クラスを使用してマーカーやポリラインに追加できる組み込みシンボルが用意されています。

デフォルトのシンボルには、円と 2 種類の矢印（後方が閉じた矢印と開いた矢印）が含まれています。前向きと後ろ向きの矢印が用意されています。ポリライン上のシンボルの向きは固定されるため、これは特にポリラインに有用です。前方は、ポリラインの終点の方向とみなされます。

任意のデフォルトのシンボル オプションを使用して、事前定義シンボルのストロークや塗りつぶしを変更できます。

次の事前定義シンボルが含まれます。

名前 説明 例
google.maps.SymbolPath.CIRCLE 円。
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW すべての辺が閉じている後方を指す矢印。
google.maps.SymbolPath.FORWARD_CLOSED_ARROW すべての辺が閉じている前方を指す矢印。
google.maps.SymbolPath.BACKWARD_OPEN_ARROW 1 つの辺が開いている後方を指す矢印。
google.maps.SymbolPath.FORWARD_OPEN_ARROW 1 つの辺が開いている前方を指す矢印。

シンボルをマーカーに追加する

マーカー上にベクターベースのアイコンを表示するには、追加先のパスを指定した Symbol オブジェクト リテラルを、マーカーの icon プロパティに渡します。次の例では、SVG パスの表記法を使用してマーカーのカスタム アイコンを作成しています。

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

サンプルを試す

シンボルをポリラインに追加する

ポリラインにシンボルを表示するには、PolylineOptions オブジェクトの icons[] プロパティを設定します。icons[] 配列は、次のプロパティを含む 1 つ以上の IconSequence オブジェクト リテラルを受け取ります。

  • icon（必須）: 線上にレンダリングするシンボルです。
  • offset: アイコンをレンダリングする線の始点からの距離を示します。この距離は、ラインの長さのパーセンテージ（例: 50%）またはピクセル数（例: 50px）で表現されます。デフォルトは「100%」です。
  • repeat: 線上に連続するアイコンを表示する場合のアイコン間の距離を示します。この距離は、ラインの長さのパーセンテージ（例: 50%）またはピクセル数（例: 50px）で表現されます。アイコンの繰り返しを無効にするには、「0」を指定します。デフォルトは「0」です。

シンボルと PolylineOptions クラスを組み合わせることで、地図上のポリラインの外観を自由にカスタマイズできます。次に、適用可能なカスタマイズの例を示します。

矢印

IconSequence.offset プロパティを使用して、ポリラインの開始位置または終了位置に矢印を追加します。

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

サンプルを表示

破線

ポリラインの不透明度を 0 に設定して、不透明なシンボルを一定の間隔でライン上に重ねることで、破線効果を実現できます。

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

サンプルを表示

カスタムパス

カスタム シンボルを作成して、多数の異なる図形をポリライン上に追加できます。

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

サンプルを表示

シンボルにアニメーションを付ける

DOM の window.setInterval() 関数を使用して一定の間隔でシンボルのオフセットを変更することで、パスに沿ってシンボルにアニメーションを付けることができます。

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

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

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

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

サンプルを試す