1. ホーム
  2. google-maps

[解決済み] Google Map API V3: マーカーにカスタムデータを追加する方法

2022-09-06 16:54:04

質問

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

マーカーがクリックされると、どのマーカーがクリックされたかによってページのコンテンツが変わるので、マーカーがクリックされたら、カスタムデータを保存して取得したいのです。

ありがとうございます。

どのように解決するのですか?

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