Google マップのレイヤー

Google Maps - オーバーレイ

オーバーレイは、緯度/経度座標にバインドされた地図上のオブジェクトです。

Google Mapsにはさまざまな種類のオーバーレイがあります：

  • マーカー（Marker） - 地図上の単一の場所。マーカーはカスタムのアイコン画像も表示できます
  • 折線（Polyline） - 地図上の一系列の直線
  • ポリゴン（Polygon） - 地図上の一系列の直線で、形状が「閉じた」
  • 円形と矩形（Circle と Rectangle）
  • 情報ウィンドウ（Info Windows） - 地図の上部に弹出するバルーンに内容を表示
  • カスタムオーバーレイ（Custom overlays）

Google Maps - マーカーを追加する

Marker構造関数はマーカーを作成できます。マーカーを表示するには、position属性を設定する必要があります。

setMap()メソッドを使用してマーカーを地図に追加してください：

インスタンス

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - マーカーアニメーション

以下の例では、animation属性を使用してマーカーにアニメーションを設定する方法を示しています：

インスタンス

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - アイコンでマーカーを置き換える

以下の例では、デフォルトのマーカーに代わりに使用する画像（アイコン）を指定しています：

インスタンス

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - 折線

折線は順序に並べられた一連の座標で描かれた線です。

折線は以下の属性をサポートしています：

  • path - 規定線の数個の緯度/経度座標
  • strokeColor - 線の16進色を規定（フォーマット："#FFFFFF"）
  • strokeOpacity - 線の不透明度を規定（0.0 から 1.0 の範囲の値）
  • strokeWeight - 線の太さをピクセル単位で規定
  • editable - ユーザーがこの線を編集できるかどうかを定義（true/false）

インスタンス

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Maps - ポリゴン

ポリゴンは折線に似ており、一連の並べられた座標で構成されています。しかし、ポリゴンは閉じた領域内の区域を定義するために設計されています。

ポリゴンは直線で構成されており、形状が「閉じた」（すべての線が結び合っている）

ポリゴンは以下の属性をサポートしています：

  • path - 緯度/経度の座標をいくつか規定（最初と最後の座標が同じ）
  • strokeColor - 線の16進色を規定（フォーマット："#FFFFFF"）
  • strokeOpacity - 線の不透明度を規定（0.0 から 1.0 の範囲の値）
  • strokeWeight - 線の太さをピクセル単位で規定
  • fillColor - 封閉領域内の色を16進色で規定（フォーマット："#FFFFFF"）
  • fillOpacity - 塗り込み色の不透明度を規定（0.0 から 1.0 の範囲の値）
  • editable - ユーザーがこの線を編集できるかどうかを定義（true/false）

インスタンス

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - 円

円は以下の属性をサポートしています：

  • center - 円の中心をgoogle.maps.LatLngで規定
  • radius - 円の半径をメートル単位で規定
  • strokeColor - 円周の線の16進色を規定（フォーマット："#FFFFFF"）
  • strokeOpacity - 線の不透明度を規定（0.0 から 1.0 の範囲の値）
  • strokeWeight - 線の太さをピクセル単位で規定
  • fillColor - 円内領域の16進色を規定（フォーマット："#FFFFFF"）
  • fillOpacity - 塗り込み色の不透明度を規定（0.0 から 1.0 の範囲の値）
  • editable - ユーザーが円を編集できるかどうかを定義（true/false）

インスタンス

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - インフォウィンドウ

markerにテキストコンテンツを持つ情報ウィンドウを表示する：

インスタンス

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);