Google Maps API v3 で座標が同じ場合の対処法

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約4年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | | |

Google Maps API v3 で座標が同じ場合の対処法

WordPress に Google Map を表示する勉強をしてまして

一つの地図に複数のマーカーを表示した時に、同座標が有る場合の対処法に苦戦しました。

以前に記事にした

【自動変換】【プラグイン】 カスタムフィールドの住所 → カスタムフィールドの緯度、経度

で、各記事に入力されている

カスタムフィールドの住所からカスタムフィールドの緯度、経度の値を自動入力して

それを使って複数のマーカーを表示する事は出来るようになりました。

下記サイト様を参考に(というかコピペ)しました。

GoogleMap v3 マーカー位置にあわせて表示領域を自動調整する

ありがとうごさいます。

そしてそして、ここからが今回の本題。

当たり前体操ですが

住所が同じ → 全く同じ緯度と経度が入力

されてしまう訳ですね。

そーすると、例えば同じビルに入ってるお店を地図に表示したいのに、2つ目以降のお店は重なってしまって見えない!という事になってしまいました。

その場合には「クリックでマーカーのウィンドウを開いた時に、2つ(またはそれ以上)のお店を一緒に表示する」というパターンも考えられるのですが、それはそれで私の知識では難しく、さらに言い訳させてもらうと、1か所に10のお店があった場合は?とか考えてしまい、この案は上手い具合に却下。

別な方法として「もし同じ座標があった場合には違和感の無い程度に少しズラして表示する」という事を考えました。

それが下記コードです。

【前提条件】として

  • 各投稿記事にカスタムフィールドで 緯度→shop_lat 経度→shop_lng を入力
  • カテゴリーページで、そのカテゴリーに属している記事に記された緯度と経度を使って複数マーカーを表示
    • という感じになってます。

      あと、基本的な事ですが header.php に下記コードが入ってないとウンともスンともなりませんのでご注意を。

      では、↓ ここからがコードです。

      んー、初心者丸出しのコードなので公開するのも恥ずかしいのですが。

      どーいった事をしてるのかと言うと

      • まず、カスタムフィールドから緯度と経度の値を取得
      • その緯度と経度(以下、座標)と同じものが以前に出力されているか?チェック用の配列 check_latlng でチェック
      • 出ていれば座標をランダムな値で少しズラし、ズラした後の値を取得
      • ズラし後の値はチェック用の配列 check_latlng に格納

      という作業を繰り返してます。

      「わかんねー」とか「表示されないんですけど!」という人はコメント頂ければ、時間のある時にお返事します。

      また、「そんな方法じゃなくて、もっと上手な方法はねぇー」と教えてくれる方も絶賛募集中です!

コメントを残す

メールアドレスが公開されることはありません。

*