皆様、こんにちは！
Google Maps Platform 専門のプロフェッショナル集団、ゴーガです。
今回は、同じ住所に複数のマーカーを表現したいとき、どのように表現する？について紹介したいと思います
地図にマーカーを表示するには緯度経度が必要になりますが、緯度経度をお持ちでない場合、Google Geocoding APIを使って住所から緯度経度に変換し、値を取得することができます。
ここでは企業の取引先の情報を社内で共有・活用するために営業支援マップを作成するケースを想定します。
取引先のリストに、以下の情報があったとしましょう。
東京都渋谷区渋谷3-6-3 20F 株式会社A
東京都渋谷区渋谷3-6-3 13F 株式会社B
上記住所に対する Google Geocoding API の緯度経度の結果は、いずれも以下のようになります。
緯度：35.65788149999999
経度：139.705189
同一ビル内の異なるフロアに複数の取引企業があると、同一住所は同一の緯度経度に変換されますので、地図上でのマーカーが重なり下に重なったマーカーをクリックすることが難しくなります。また、その場所に複数のポイントがあることに気付けないというケースもあります。こういった場合、どのように表現するのがよいでしょうか。
マーカーをずらす
同一の住所が複数ある場合は、緯度経度を少し変更することでマーカーがそれぞれ見えるようになります。
同じ敷地内であれば、ずらしても場所を示す目的は果たせます。
吹き出しで工夫してみる
こちらは緯度経度は同一のままとし、マーカーをクリックした時の吹き出しに、複数のデータがあることを示す例です。（マップ上のデータはダミーです）
それぞれのデータをクリックすると、関連する詳細ページに遷移します。
複数のデータがあることを示すマーカーを用意しておくと、一目でわかりやすいと思います。
工夫次第でさまざまな表現が実現できますね。
マーカーの重なり順はどうなる？
最後にちょっとしたTIPSです。AdvancedMarkerElement では、どのマーカーを手前に表示するかをzIndexを使って設定することができます。zIndexの設定値が高いほうが優先度が高くなり、手前に表示されるようになります。
上のマップの場合は、以下のように指定しています。
- 赤く塗りつぶされたマーカー zIndex3
- グレーに塗りつぶされたマーカー zIndex2
- 青マーカー zIndex1
参考：
https://developers.google.com/maps/documentation/javascript/reference/advanced-markers?hl=ja#AdvancedMarkerElementOptions.zIndex
重要なマーカーなので目立たせたいといった場合など、ぜひ試してみてください。
