Google Map API V3:カスタムデータをマーカーに追加する方法


116

後で使用するためにマーカーにカスタム情報を追加する方法はありますか?情報ウィンドウとタイトルを設定する方法はいくつかありますが、マーカーを他の情報に関連付けるにはどうすればよいでしょうか。

マーカーに依存するページに他のものが表示されているので、マーカーがクリックされたとき、ページ上のコンテンツはクリックされたマーカーに応じて変更する必要があります。クリックなど

ありがとう

回答:


213

GoogleマーカーはJavaScriptオブジェクトであるためkey: value、フォームにカスタム情報を追加できます。ここで、keyは有効な文字列です。これらはオブジェクトプロパティと呼ばれ、さまざまな方法でアクセスできます。値は、数値や文字列のように単純なものであれば何でもかまいませんが、関数や他のオブジェクトでもかまいません。3つの簡単な方法:宣言では、ドット表記と角括弧

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

次に、同様の方法でそれを取得します。

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
このパターンを形式化したドキュメント何もありません。ここでは、新しいバージョンでそれを壊すのではなく、そうすることを望んでいます。
アダム

1
プロパティ「customInfo」はタイプ「マーカー」に存在しません。
alehn96 2017

1
あなたはtypescriptですを使用している場合は、このような特性を割り当てるために、ドットではなく、ブラケットを使用することをお勧めします
Cocoduf

14

独自のカスタムプロパティをマーカーに追加できます(APIのプロパティと競合しないように注意してください)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.