	[ ビジネス - 製造業 ]		livedoor ブログをはじめる

[Google]Google Mapsを利用してホームページにスクロール地図を設置してみた

2006年04月06日

[Google]Google Mapsを利用してホームページにスクロール地図を設置してみた

ブックマークなど»|

[Google]Google Mapsを利用してホームページにスクロール地図を設置してみたのコメントを見る

user(s)|

先日「Ajax Google Mapsを自サイトに設置する - ［JavaScript］All About」という記事を読んで、Google Maps様がずいぶん近くに来たものだなと思えた。

Ajax Google Mapsを自サイトに設置する - ［JavaScript］All About

早速、会社で運営しているDTP・デザイン・印刷関連の会社のPRサイトのPrintJapan.comに設置をしてみた。何事もチャレンジ。

PrintJapan.comは日立の「boxerblog Powered by TypePad」を使わせてもらっています。ココログみたいに重くないですよ、って当たり前か。日立の名前（ブランド）がかかっているもんね。（というかニフティだって富士通の名前はかかっていないのか？100％富士通の子会社なのに…）

まぁ余談は良いとして、TypePadなのでバックアップをしなくても大丈夫とかサーバーを用意しなくても良いとか、良い面もあるのですが、逆に好き勝手に色々プラグインを追加できないというジレンマが。創意工夫でなんとかしないといけないのが面倒というか何というか。

今回はエントリーの書き込みページにあるキーワードの欄に書き込んだ第1変数と第2変数（カンマで区切った数字2つ）を緯度・経度として利用することにしました。緯度・経度の調べ方はGoogle Mapsで調べました。（URLに緯度・経度が書いてある）

緯度・経度は単純にjavascriptに持ってくるときに配列に入れて、あとはAllAboutのページのソースに沿って書いてあげればいいのですが、Google Mapsで調べた緯度・経度はソースの中では緯度・経度の順番が逆なので、Google Maps APIsを使用するときに順序を逆に入れてあげます。（なお、配列に入れたのは「,」区切りで入っている文字列（「,」の数は不定）の先頭の2つの値を変数2つに代入する手っ取り早い方法が思いつかなかったからなのですが…何か良い方法があれば誰か教えてください。）

var flag = isNaN(f1);

if (flag == false) {

とか書いているのはエントリーのキーワード欄にに何も書いていない場合や緯度・経度が入っていない場合にGoogle Mapsの作画処理をしないようにするためです。elseの方で「document.getElementById("gmaps").style.display = "none";」にして、後でGoogle Mapsのために確保した領域は「なかった」ことにしています。

あとは「解説 : Google Maps APIs」を見ながら表示するマップのパーツを設定します。

「map.addControl(new GLargeMapControl());」は左側の移動ボタンと拡大縮小ボタンの表示ですが、「GLargeMapControl()」の部分は他にも「GSmallMapControl()」（＝拡大縮小のスライダーがないタイプ）「GSmallZoomControl()」（拡大縮小のみ）があるけど、「「GLargeMapControl()」」が使い勝手は良いように思えます。Internet Explorerではスライダーを動かすことで

「map.addControl(new GMapTypeControl())」ってのは地図のタイプ「普通の地図」「衛星写真」「ハイブリッド型」を選べるのですが、衛星写真のタイプは田舎じゃあまり使えないのでコメントアウトしました。

「map.openInfoWindowHtml(map.getCenterLatLng(),msg);」で情報ウインドいわゆる「吹き出し」ですが、会社名くらいしか自動で入れられる要素が思いつかなかったのでコメントアウトしました。トラックバックのタイトルとか入れればいいのかねぇ。

あとはAllAboutのサンプルソースを関数にしておきます。これはなぜかというと、Internet Explorerではページの構成によってはインラインで書いておくと、「インターネットサイトを開けません。操作は中断されました」とかエラーメッセージが出て、ページの表示ができない場合があるからです。

解決方法は「HepCat Dev and Test: GoogleマップとIEの「開けません。操作は中断されました」」に書いてあるように、<body>のタグに<body onload="dispgmaps()">と書いて、ページのロードが終わってからGoogle Mapsを作画開始すればOKみたいですね。

…このエラーで半日以上潰れた…。＜アホ

"操作は中断されました" Google Maps - Google 検索

HepCat Dev and Test: GoogleマップとIEの「開けません。操作は中断されました」

<script type="text/javascript">
function dispgmaps(){

var settingvalue = new Array(<$MTEntryKeywords$>);
var f1 = settingvalue[0];
var f2 = settingvalue[1];

var flag = isNaN(f1);

if (flag == false) {

var map = new GMap(document.getElementById("gmaps"));

//東京タワーの経緯度とズーム値(整数で0が詳細)を指定します
// 経緯度は、ここ↓でも調べられます
// http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon2_for_wgs84.htm
map.centerAndZoom(new GPoint(f2, f1), 1);

var loc = new GPoint(f2,f1);

//ポイントを表示
var marker = new GMarker(loc);
map.addOverlay(marker);

//コントロール追加
map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());

//情報ウインドウ内の文字列を指定します
//var msg = "<$MTEntryTitle$>";

//情報ウインドウ表示
//map.openInfoWindowHtml(map.getCenterLatLng(),msg);
}
else
{
document.getElementById("gmaps").style.display = "none";
}
}

</script>

とかいって今メール見たら「ALPSLAB slide」なんちゅう簡単に地図を貼り付けられるサービスの紹介が…。ALPS忘れていた…orz（ココギコとかみているのに…）。APIとかいらねーじゃん。これ。超簡単ですなー。簡易ルート再生機能って…すごいね、コレ。

ALPSLAB slide

ALPSさんのサービスを使えばMac版のInternet ExplorerなどのGoogle Maps対応ではないブラウザでも地図の表示ができるかな（地図をjavascriptではなく<img>タグで出力できるため）。と思ったら何か緯度・経度の値がGoogle Mapsの値から変換するのが面倒そうー。ううー。