Google Maps オーバレイ

❮ 前章へ 次章へ ❯

Google map にマーカを追加します：

Google Maps - オーバレイ

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

Google Maps には、いくつかのタイプのオーバレイがあります：

Google Maps - マーカの追加

Marker コンストラクタはマーカを作成します。（position プロパティは、表示するためにマーカに設定しなければならないことに注意してください）。

setMap() メソッドを使用して、マーカをマップに追加します：

例

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

marker.setMap(map);
Try it Yourself »

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

下の例は、animation プロパティによってマーカをアニメ化する方法を示しています：

例

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

marker.setMap(map);
Try it Yourself »

Google Maps - マーカの代わりのアイコン

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

例

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

marker.setMap(map);
Try it Yourself »

Google Maps - ポリライン

ポリラインは、シーケンス順に一連の座標を通して描かれる線です。

ポリラインは、次のプロパティをサポートしています：

例

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

Google Maps - ポリゴン

ポリゴンは、ポリラインと同様に、シーケンス順の一連の座標で構成されています。 しかし、ポリゴンは閉ループ内の領域を定義するために設計されています。

ポリゴンは直線でできており、その形状は「閉じて」います（すべての線が接続します）。

ポリゴンは次のプロパティをサポートしています：

例

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
});
Try it Yourself »

Google Maps - 円

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

例

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

Google Maps - 情報ウィンドウ

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

例

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

infowindow.open(map,marker);
Try it Yourself »

❮ 前章へ 次章へ ❯