Googleマップオーバーレイ

❮前次の章❯

グーグルマップにマーカーを追加します。

Googleマップ - オーバーレイ

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

Googleマップでは、オーバーレイのいくつかの種類があります。

マーカー - 地図上の単一の場所。マーカーはまた、カスタムアイコン画像を表示することができます
ポリライン - 地図上の直線のシリーズ
ポリゴン - 地図上の直線のシリーズ、および形状が「閉」であります
サークルや長方形
情報ウィンドウは - マップの上にポップアップバルーン内のコンテンツを表示します
カスタムオーバーレイ

Googleマップ - マーカーを追加します。

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

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

例

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

marker.setMap(map);

»それを自分で試してみてください

Googleマップ - マーカーをアニメーション

次の例では、アニメーションプロパティでマーカーをアニメーション化する方法を示しています。

例

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

marker.setMap(map);

»それを自分で試してみてください

Googleマップ - アイコンの代わりにマーカー

次の例では、画像を指定する(icon)デフォルトのマーカーの代わりに使用すること：

例

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

marker.setMap(map);

»それを自分で試してみてください

Googleマップ - ポリライン

ポリラインは、順序付けられたシーケンス内の一連の座標を通って引かれる線です。

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

パスは、 - いくつかの緯度/経度がラインの座標を指定します
strokeColor -ラインの16進数のカラーを指定します(format: "#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マップ - ポリゴン

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

多角形は直線で作られており、形状がされている"closed" （すべてのラインアップ接続します）。

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

パスは、 - いくつかの緯度経度が（最初と最後の等しい座標）ラインの座標を指定します
strokeColor -ラインの16進数のカラーを指定します(format: "#FFFFFF")
strokeOpacity - ライン（0.0と1.0の間の値）の不透明度を指定します
strokeWeight - ピクセル単位で線のストロークの重さを指定します
塗りつぶし-囲まれた領域内の領域のために16進数のカラーを指定します(format: "#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
});

»それを自分で試してみてください

Googleマップ - サークル

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

センター - 円の中心のgoogle.maps.LatLngを指定します
半径 - メートルで、円の半径を指定します
strokeColor -円の周りのラインのための16進数のカラーを指定します(format: "#FFFFFF")
strokeOpacity - ストロークの色（0.0と1.0の間の値）の不透明度を指定します
strokeWeight - ピクセル単位で線のストロークの重さを指定します
塗りつぶし-サークル内の領域のために16進数のカラーを指定します(format: "#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
});

»それを自分で試してみてください

Googleマップ - 情報ウィンドウ

マーカーのためのいくつかのテキストコンテンツと情報ウィンドウを表示します：

例

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

infowindow.open(map,marker);

»それを自分で試してみてください