Google マップ

Google マップにマーカーを追加する

Google マップ - オーバーレイ

オーバーレイは、地図上の経度/緯度座標にバインドされたオブジェクトで、地図をドラッグまたはズームすると移動します。

Google マップ API には、次の種類のオーバーレイがあります：

  • 地図上の点はマーカーを使用して表示され、通常はカスタムアイコンが表示されます。マーカーは GMarker タイプのオブジェクトであり、GIcon タイプのオブジェクトを使用してアイコンをカスタマイズできます。
  • 地図上の線はポリライン（点の集合を表す）を使用して表示されます。線は GPolyline タイプのオブジェクトです。
  • 地図上の領域は、任意の形状の領域の場合はポリゴン、矩形領域の場合はグラウンドオーバーレイとして表示されます。ポリゴンは閉じたポリラインに似ているため、任意の形状にできます。グラウンドオーバーレイは通常、地図上のタイルに直接的または間接的に関連する領域に使用されます。
  • 地図自体はタイルオーバーレイを使用して表示されます。独自のタイルシリーズがある場合は、GTileLayerOverlay クラスを使用して地図上の既存のタイルを変更したり、GMapType を使用して独自の地図タイプを作成したりすることもできます。
  • 情報ウィンドウも特別なオーバーレイです。ただし、情報ウィンドウは自動的に地図に追加され、地図には GInfoWindow タイプのオブジェクトを1つだけ追加できることに注意してください。

Google マップ - マーカーの追加

マーカーは地図上の点を識別します。デフォルトでは、G_DEFAULT_ICON を使用します（カスタムアイコンを指定することもできます）。GMarker コンストラクターは、GLatLng と GMarkerOptions（オプション）オブジェクトをパラメーターとして受け取ります。

マーカーはインタラクティブに操作できるように設計されています。たとえば、デフォルトでは "click" イベントを受け取り、イベントリスナーで情報ウィンドウを開くためによく使用されます。

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

例

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

試してみる »

Google マップ - ドラッグ可能なマーカー

次の例では、animation プロパティを使用してマーカーをドラッグする方法を紹介します：

例

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

試してみる »

Google マップ - ポリライン

GPolyline オブジェクトは、地図上に線形オーバーレイを作成できます。GPolyline には一連の点が含まれ、これらの点を順番に接続する一連の線分を作成します。

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

  • 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 マップ - ポリゴン

GPolygon オブジェクトは GPolyline オブジェクトに似ています。どちらも一連の順序付けられた点を含むためです。ただし、ポリゴンはポリラインのように2つの端点を持つわけではなく、閉じたループを形成する領域を定義するように設計されています。

ポリラインと同様に、ポリゴンの辺（線）の色、太さ、透明度、および閉じた塗りつぶし領域の色と透明度をカスタマイズできます。色は16進数のHTMLスタイルである必要があります。

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

  • 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 マップ - 円

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

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

試してみる »

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

マーカー上にテキスト情報ウィンドウを表示します：

例

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

試してみる »

Google マップ - オーバーレイリファレンスマニュアル

Google Maps API リファレンスマニュアル.

その他の拡張