Googleマップオーバーレイ
Googleマップ-オーバーレイ
オーバーレイは、緯度/経度の座標にバインドされているマップ上のオブジェクトです。
Googleマップには、いくつかの種類のオーバーレイがあります。
- マーカー-地図上の単一の場所。マーカーはカスタムアイコン画像を表示することもできます
- ポリライン-マップ上の一連の直線
- ポリゴン-マップ上の一連の直線で、形状は「閉じた」状態です
- 円と長方形
- 情報ウィンドウ-マップ上部のポップアップバルーン内にコンテンツを表示します
- カスタムオーバーレイ
Googleマップ-マーカーを追加
Markerコンストラクターはマーカーを作成します。マーカーを表示するには、positionプロパティを設定する必要があることに注意してください。
setMap（）メソッドを使用して、マーカーをマップに追加します。
例
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Googleマップ-マーカーをアニメーション化
次の例は、animationプロパティを使用してマーカーをアニメーション化する方法を示しています。
例
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Googleマップ-マーカーの代わりにアイコン
次の例では、デフォルトのマーカーの代わりに使用する画像（アイコン）を指定しています。
例
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
グーグルマップ-ポリライン
ポリラインは、一連の座標を順番に並べて描画される線です。
ポリラインは次のプロパティをサポートします。
- パス-ラインのいくつかの緯度/経度座標を指定します
- strokeColor-線の16進色を指定します（形式： "＃FFFFFF"）
- strokeOpacity-線の不透明度を指定します（0.0から1.0の間の値）
- strokeWeight-線のストロークの太さをピクセル単位で指定します
- 編集可能-行がユーザーによって編集可能かどうかを定義します（true / false）
例
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Googleマップ-ポリゴン
ポリゴンは、順序付けられたシーケンスの一連の座標で構成されるという点でポリラインに似ています。ただし、ポリゴンは閉ループ内の領域を定義するように設計されています。
ポリゴンは直線でできており、形状は「閉じている」（すべての線がつながっている）。
ポリゴンは次のプロパティをサポートします。
- path-ラインの複数のLatLng座標を指定します（最初と最後の座標は等しい）
- strokeColor-線の16進色を指定します（形式： "＃FFFFFF"）
- strokeOpacity-線の不透明度を指定します（0.0から1.0の間の値）
- strokeWeight-線のストロークの太さをピクセル単位で指定します
- fillColor-囲まれた領域内の領域の16進色を指定します（形式： "＃FFFFFF"）
- fillOpacity-塗りつぶしの色の不透明度を指定します（0.0から1.0の間の値）
- 編集可能-行がユーザーによって編集可能かどうかを定義します（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
});
グーグルマップ-サークル
円は次のプロパティをサポートします。
- center-円の中心のgoogle.maps.LatLngを指定します
- radius-円の半径をメートル単位で指定します
- strokeColor-円の周りの線の16進色を指定します（形式： "＃FFFFFF"）
- strokeOpacity-ストロークの色の不透明度を指定します（0.0から1.0の間の値）
- strokeWeight-線のストロークの太さをピクセル単位で指定します
- fillColor-円内の領域の16進色を指定します（形式： "＃FFFFFF"）
- fillOpacity-塗りつぶしの色の不透明度を指定します（0.0から1.0の間の値）
- 編集可能-サークルがユーザーによって編集可能かどうかを定義します（true / false）
例
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
グーグルマップ-インフォウィンドウ
マーカーのテキストコンテンツを含むインフォウィンドウを表示します。
例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);