以上で完了です。

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

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

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

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

シンボル

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

はじめに

シンボルは、マーカー上でベクターベースのアイコンを使用する場合、またはポリラインに画像を追加する場合に有用です。

Symbol は、Marker または Polyline オブジェクト上で表示可能なベクターベースの画像です。シンボルの形状は、SVG パス表記を使用したパスにより定義されます。Symbol オブジェクトでは path のみが必須のプロパティですが、このオブジェクトはさまざまなプロパティをサポートし、ストロークや塗りつぶしの色や幅などの視覚的な側面のカスタマイズを可能にします。プロパティの一覧を下記に示します。

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

シンボルのプロパティ

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

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

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

下の例は、事前定義ベクターパスの 1 つを使用してアイコンを作成します。

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: 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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

例を見る(marker-symbol-predefined)

次の例は、SVG パス表記を使用してマーカー用のカスタム アイコンを作成します。

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: 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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

例を見る(marker-symbol-custom)

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

ポリライン上にシンボルを表示するには、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
});

例を見る(overlay-symbol-arrow)

破線

ポリラインの不透明度を 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
});

例を見る(overlay-symbol-dashed)

カスタムパス

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

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

例を見る(overlay-symbol-custom)

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

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

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

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

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

例を見る(overlay-symbol-animate)

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

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