グーグルマップ+ストリートビューが連動する地図の設置方法

CATEGORY : column

グーグルマップ+ストリートビューが連動する地図の設置方法

main_catch

今まで、自分が受け持つ案件では<iframe>で埋め込む事が多かった「グーグルマップ」。地図を表示させるだけならそれで良かったのですが、カーソルがグーグルマップ上にあると、こっちはページの下を閲覧したいのにMAPの中身が動いてしまい、少しユーザビリティが下がってしまっていました。「Google Maps API」を利用すればこの現象を回避出来る事は知っていたのですが、たかだか地図を表示させるだけでAPI使うのもなぁ・・・と思い、APIを使用せずに実装する方法はないものか・・・?と躍起になって探していたのですが、どうやら出来ない模様・・・。APIを利用するしかないのであれば、機能をもっと付けようと思い

■ストリートビュー表示
■マップとストリートビューの連動
■自作マーカーの配置
■マウスのスクロールは非連動

と上記4つを実装することにしました。下に表示されているのが完成したサンプルになります。

ストリートビューが存在しません。

上のストリートビューで、場所の移動をすると、MAP側のペグマンが連動して動いていると思います。このように、ストリートビューとマップのペグマン(人型アイコン)が連動するMAPを設置する事ができます。不動産系のサイトなどでは、ただ単にMAPを表示させるだけよりもエンドユーザーに対する訴求力は高まるんではないでしょうか?それでは早速設置方法です。

グーグルマップの設置手順

Step1 APIの読み込み

上記をHTMLのヘッド内、またはMAP+ストリートビューを表示する箇所より先に記述します。

Step2 グーグルマップ・ストリートビューを表示させる要素を設置

Step3 グーグルマップ側の設定を記述

この記述はStep1同様に表示させる要素より先に記述して下さい。

この状態で通常のMAPは表示されているはずです。ここから「マーカー」と「ストリートビュー」を表示させていこうと思います。

グーグルマップの座標点に自作マーカーを表示させる

マーカーを表示させるためにはそれ専用の記述を増やさなければなりません。

Step1 マーカー用の記述を追加

Step2 マーカー用の記述を元のソースに追加

この状態で、先ほどのMAPに指定していた座標点にマーカーが表示されていると思います。では次にストリートビューの表示です。

ストリートビューの設置手順

連動させるとなると、なんだかハードルが高そうな気がしないでもないですが、非常に簡単に設置可能です。※APIのおかげで(笑)

Step1 ストリートビュー用の記述を追加

Step2 ストリートビュー用の記述を元のソースに追加

ここまでの段階でストリートビューが表示出来ていると思います。では、最後に「表示させているMAPとストリートビューの連動処理」をしていきましょう。

Step3 MAPとストリートビューの連動の記述を追加

何とこの一行を追加するだけで可能です。(JSのロジックが分かる方は今更ですが「map」と「panorama」のインスタンス名を自分で変更して頂いても大丈夫です。)

Step4 ストリートビュー連動用の記述を元のソースに追加

見た目もかなり良くなり、「表示されている場所」に対するイメージを具体的に与えることが出来るようになると思います。
実際の業務では、上記の様にかなり長いコードになってしまうので、<iframe>版と使い分けると良いと思います。
簡単に説明をしてしまった為、他のオプションに関しては、こちらのサイトなどを参考にされてみてください。

いやはや、ストリートビューの対応地域がいつの間にか日本全土になっていてかなり驚いています。
あっという間に、この調子でストリートビューを初め多くのwebサービスが進化を遂げていくんでしょうね。
いつまでも今のままの状態では、この業界どんどん置いて行かれてしまうと考えると恐怖です(笑)
だんだんと、デザイナー・SE・PGの仕事の範囲の垣根がなくなっていっていますね。「忙しくて勉強なんて出来ない!」
ではなく、忙しいからこそ「楽しんで勉強!」をやっていかないとダメですね。

しかし分かっていても、それが難しい(笑)。僕の場合は、運が良いことにコラムの担当にして頂けた事で、
淡々と毎週勉強する時間を強制的に毎週取れています。この世界生き残る為にはやはり、
我慢強くコツコツと頑張れる人間じゃないといけませんね(笑)

おいおい「WEBデザイナー」は職種として消えるかも知れない・・・なんて言われてますが生き残るための
選択肢は数多くあると僕は思います。
枠に囚われず、依頼されること・やれることは全部挑戦してみる!をモットー
にこれからも精進していきたいと思います。

なんだか妙に長い文章になってしまいましたね・・・。後書きが一番長くなってしまってすいません・・・。あまり
理屈っぽくまとめたくなかったのですが、たまにはこんなコラムがあっても
まぁ、いいんじゃないかと思い、文章をライティングしております(笑)ダラダラ書いてすいません。
しこたま、良い文章が頭に浮かぶ人間だったらよかったのですが・・・。
端的にライティング出来るようにこれからもがんばります!!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

contact_bana