同じ住所に複数のマーカーを表示するには？

皆様、こんにちは！

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

参考：

重要なマーカーなので目立たせたいといった場合など、ぜひ試してみてください。

▼お問い合わせはこちら

▼ブログトップページ