(続)住所データからGoogleマップ+ストリートビューを表示させる方法(wordpress)

ストリートビューまで表示できちゃいました♪

以前の記事、
住所からGoogleマップを表示させる方法(wordpress)の続きです!

wordpressに住所を書くだけで、その場所のgoogleマップを
呼び出す方法を実践しています。

前回紹介したショートコード、あなどれないですね~。
というか、めちゃめちゃ使えます♪

googleマップを表示させるショートコードaddr2gmap
中身を覗いてみると、結構簡単な構造だったので、
ちょっと試してみたんですが、なんと、私、自力で、
googleマップ+ストリートビュー表示を達成できちゃいました♪

やったのは、2つだけ。
40行目付近のここの部分に、

<!–Start gmap–>
<div id=”gmap” style=”margin-left: auto; margin-right:auto; width: {$width}; height:{$height}; border: 1px solid #000000;”></div>

↓こんな感じで加える。(高さは250pxじゃなくて自由でいいです)

<!–Start gmap–>
<div id=”gmap” style=”margin-left: auto; margin-right:auto; width: {$width}; height:{$height}; border: 1px solid #000000;”></div>
■周辺の様子<br />
<div id=”street” style=”margin-left: auto; margin-right:auto; width: {$width}; height:250px; border: 1px solid #000000;”></div>

次に、50行目付近のここの部分に、

function show_map(lat,lng){
var zoom = {$zoom};
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(‘gmap’));
map.setCenter(new GLatLng(lat, lng), zoom);
map.addControl(new GSmallMapControl());
var point = new GLatLng(parseFloat(lat),parseFloat(lng));
map.addOverlay(createMarker(point, 0));
}

ストリートビュー表示のための記述を付け足します。
↓こうするだけ。

function show_map(lat,lng){
var zoom = {$zoom};
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(‘gmap’));
map.setCenter(new GLatLng(lat, lng), zoom);
map.addControl(new GSmallMapControl());
var point = new GLatLng(parseFloat(lat),parseFloat(lng));
map.addOverlay(createMarker(point, 0));
var slatlng = new GLatLng(lat, lng);
var option = { latlng:slatlng };
var scontainer = document.getElementById(“street”);
var panorama = new GStreetviewPanorama(scontainer, option);

}

いやー、プログラムの知識が全くない私にもできたとは、
我ながら、感激です♪♪♪

コメントを残す

サブコンテンツ

このページの先頭へ