Googleマップにマーカーを追加表示する

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Googleマップ

Googleマップで観光スポットを表示しているときに、近くの観光スポットをリストで表示していて、そのスポットをマウスでポイントしてやれば、そのスポットのマーカーを地図に追加して表示し、さらに現在地と追加地のマーカーが全て表示されるようにマップの拡大率を自動的に変更する・・・という仕様が必要になったので、備忘録メモ。

例えば、以下のような地図を表示するようにGoogle Map V3でコードを書きます。

イベント処理をクロスブラウザで考えるのは面倒なので、定番のjQueryで書きますが・・・

これで地図が表示されます。

ロサンゼルス

ここでページ上に、「近くにこんなところもありますよ♪」みたいな感じでサウスバレーというスポットが表示されていました。
その文字(写真でも)をポイントすると、地図上にサウスバレーの位置を追加したいと言うことです。

そこで、そのサウスバレーを表示しているHTMLは、

こんな感じで表示しておきます。
ポイントは、クラス「add-point」を付与していることと、data属性のそれぞれlatとlngに緯度、経度を指定しています。

jQueryを使えばポイントした時というのは簡単にかけますね。

あとは、その中にマーカーを追加する処理を書くだけです。

まず、既にマーカーが追加されていれば、それを削除します。
そうでないと、同じ場所をポイントする度に、マーカーが何個も重なって表示されます。
同じ場所に描画されるので、気づきにくいんです。

そして、ポイントした要素のdata属性から緯度と経度を取得して、それをGoogleマップで使えるようにします。

マーカーを表示すれば、これでOK・・・ってわけでもないんです。
現在表示されている拡大率で、表示範囲外にマーカーが描画されても気づかないですよね。
なので、元のマーカーと、追加されたマーカーが2つ表示できる最適な拡大率に自動設定してやります。
GoogleマップではfitBoundsメソッドが用意されているので、これを使います。

2地点の緯度・経度値から、地図の南西の座標と北東の座標から、表示領域を決定します。

これを1つに纏めたのが以下です。

これでサウスバレーをポイントすると、以下のように地図が表示されます。

ロサンゼルス サウスバレー

図の例だとピンを押しピンに変更していますが、上記のコードでは同じマークが表示されます。

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。