'streetview' Tag

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

main_catch

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

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

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

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

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

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

Step1 APIの読み込み

<script src=”//maps.google.com/maps/api/js?sensor=false”></script>

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

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

<!–MAP用div–>
<div id=”g_map”></div>
<!–ストリートビュー用div–>
<div id=”pano”></div>

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

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

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

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

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

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

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

var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});

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

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

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

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

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

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

var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述

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

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

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

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

map.setStreetView(panorama);

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

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

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述
map.setStreetView(panorama);//MAP+ストリートビュー連動の記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

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

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

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

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

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

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