マーカー
はじめに
マーカーは地図上の場所を識別します。デフォルトでは、マーカーは標準画像を使用します。マーカーはカスタム画像を表示できます。その場合、通常は「アイコン」と呼ばれます。マーカーとアイコンは、タイプMarker
のオブジェクトです。マーカーのコンストラクター内でカスタムアイコンを設定するか、マーカーでsetIcon()
を呼び出すことができます。マーカー画像のカスタマイズの詳細については以下をご覧ください。
大まかに言えば、マーカーはオーバーレイの一種です。他の種類のオーバーレイについては、地図上での描画を参照してください。
マーカーはインタラクティブになるように設計されています。たとえば、デフォルトではイベント。イベントリスナーを追加して、カスタム情報を表示する情報ウィンドウを表示できます。マーカーのdraggable
プロパティをtrue
に変更します。ドラッグ可能なマーカーの詳細については、以下を参照してください。
マーカーを追加する
google.maps.Marker
コンストラクターは単一のMarker options
オブジェクトリテラル。マーカーの初期プロパティを指定します。
次のフィールドは特に重要であり、マーカーを作成するときに一般的に設定されます。
-
position
(必須)は、マーカーの初期位置を識別するLatLng
を指定します。LatLng
を取得する1つの方法は、ジオコーディングサービスを使用することです。 -
map
(オプション)は、マーカーを配置するMap
を指定します。マーカーの作成時にマップを指定しない場合、マーカーは作成されますが、マップに添付(または表示)されません。後でマーカーのsetMap()
メソッド。
次の例では、オーストラリアの中心部にあるウルルの地図に簡単なマーカーを追加します。
上記の例では、マーカーは次のとおりです。マーカーオプションのmap
プロパティを使用して、マーカーの作成時にマップ上に配置されます。または、マーカーのsetMap()
メソッド:
マーカーのtitle
がツールチップとして表示されます。
マーカーのコンストラクターでMarker options
を渡したくない場合は、代わりに最後に空のオブジェクト{}
を渡します。コンストラクターの引数。
例を表示
マーカーを削除する
マップからマーカーを削除するには、
メソッドは引数としてnull
を渡します。
marker.setMap(null);
上記に注意してくださいメソッドはマーカーを削除しません。マップからマーカーを削除します。代わりにマーカーを削除する場合は、マーカーをマップから削除してから、マーカー自体をnull
に設定する必要があります。
管理する場合マーカーのセット。マーカーを保持する配列を作成する必要があります。この配列を使用すると、マーカーを削除する必要があるときに、配列内の各マーカーでsetMap()
を順番に呼び出すことができます。マップからマーカーを削除してから、配列のlength
を0
に設定すると、マーカーを削除できます。これにより、マーカーへのすべての参照が削除されます。マーカー。
例を表示
マーカーをアニメーション化する
マーカーをアニメーション化して、さまざまな状況で動的な動きを示すようにすることができます。マーカーはアニメーション化されています。タイプgoogle.maps.Animation
のマーカーのanimation
プロパティを使用してください。次のAnimation
値がサポートされています。
-
DROP
は、マーカーを上からドロップする必要があることを示しますマップ上に最初に配置されたときの最終的な場所へのマップ。マーカーが静止するとアニメーションは停止し、animation
はnull
に戻ります。このタイプのアニメーションは通常、Marker
の作成時に指定されます。 -
BOUNCE
は、マーカーがバウンスする必要があることを示します場所。バウンスマーカーは、そのanimation
プロパティが明示的にnull
に設定されるまでバウンスし続けます。
あなたMarker
オブジェクトでsetAnimation()
を呼び出すことにより、既存のマーカーでアニメーションを開始できます。
マーカーが多数ある場合、一度にマップにドロップしたくない場合があります。以下に示すようなパターンを使用して、setTimeout()
を使用してマーカーの間隔を空けることができます。
function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}
例を見る
マーカー画像をカスタマイズする
マーカーに文字や数字を表示する場合は、マーカーラベルを使用できます。さらにカスタマイズが必要な場合は、デフォルトのマーカー画像の代わりに表示するアイコンを定義できます。アイコンの定義には、マーカーの視覚的動作を決定するいくつかのプロパティの設定が含まれます。
以下のセクションでは、マーカーラベル、単純なアイコン、複雑なアイコン、および記号(ベクトルアイコン)について説明します。
マーカーラベル
マーカーラベルは、マーカー内に表示される文字または数字です。このセクションのマーカー画像には、文字「B」が付いたマーカーラベルが表示されます。マーカーラベルは、文字列、または文字列とその他のラベルプロパティを含むMarkerLabel
オブジェクトとして指定できます。
マーカーを作成するときに、 MarkerOptions
オブジェクトのlabel
プロパティ。または、MarkerオブジェクトでsetLabel()
を呼び出して、既存のマーカーにラベルを設定することもできます。
次の例では、ユーザーが地図をクリックすると、ラベル付きのマーカーが表示されます。 :
シンプルなアイコン
最も基本的なケースでは、アイコンは、デフォルトのGoogleマップの画鋲アイコンの代わりに使用する画像を示すことができます。このようなアイコンを指定するには、マーカーのicon
プロパティを画像のURLに設定します。MapsJavaScriptAPIはアイコンのサイズを自動的に設定します。
複雑なアイコン
クリック可能な領域を示すために複雑な形状を指定し、他のオーバーレイと比較してアイコンをどのように表示するか(「スタック順序」)を指定できます。この方法で指定したアイコンは、ivを設定する必要があります。タイプIcon
のオブジェクトに対するid = “9ffa503dc8″>
プロパティ。
Icon
オブジェクトは定義します画像。アイコンのsize
、アイコンのorigin
も定義します(必要な画像が大きい画像の一部である場合)たとえば、スプライト内の画像)、およびアイコンのホットスポットを配置するanchor
(原点に基づく)。
カスタムマーカー付きのラベルを使用している場合は、labelOrigin
プロパティを使用してラベルをオブジェクト。
MarkerImage
オブジェクトをタイプIcon
Maps JavaScript APIのバージョン3.10までは、複雑なアイコンはMarkerImage
オブジェクトとして定義されていました。 Icon
オブジェクトリテラルはバージョン3.10で追加され、バージョン3.11以降のMarkerImage
に置き換わります。 Icon
オブジェクトリテラルはMarkerImage
と同じパラメータをサポートしているため、MarkerImage
を簡単に変換できます。コンストラクターを削除し、前のパラメーターを{}
でラップし、各パラメーターの名前を追加して、Icon
に追加します。例:
になる
シンボル
ラスターイメージに加えて、マーカーはSymbols
と呼ばれるベクトルパスの表示をサポートします。 。ベクターパスを表示するには、目的のパスを含むSymbol
オブジェクトリテラルをマーカーのicon
プロパティに渡します。 google.maps.SymbolPathで事前定義されたパスのいずれかを使用するか、SVGパス表記を使用してカスタムパスを定義できます。
詳細については、シンボルのドキュメントを参照してください。
作成マーカーをドラッグ可能
ユーザーがマーカーを地図上の別の場所にドラッグできるようにするには、draggable
をtrue
に設定します。マーカーオプションで。
マーカーのさらなるカスタマイズ
完全にカスタマイズされたマーカーについては、カスタマイズされたポップアップの例を参照してください。