yamachan Ajax/.NET/C# メモ

2007-01-27

[Ajax] Google MAPS を使用してみる

AjaxWeb2.0 がここまで盛り上がったのは、Googleマップ の存在が大きいのではないでしょうか。

プラグイン無しで実現された、ドラッグでスクロールする地図の存在は衝撃的でした。 新しい技術のメリットを判りやすく実現した、理想的なキラーアプリだと考えています。 さらにAPIが公開され、自サイトに組み込める点はもう素晴らしすぎて涙が出そうです。

というわけで、↓利用してみました。



Googleマップを利用する場合、ページに直接埋め込む方法と、別に用意したhtmlファイルをiframeで組み込む方法があります。

ページに直接埋め込む方法だと、利用する場所に全てのコードがあるので準備が簡単です。 ただ文字コードの問題が発生することがあるとか。 具体的には、そのページが UTF-8 で保存されているのが望ましいみたい。

またサイトごとに Google MAPS APIサイト から、APIキーを取得する必要があります。 Bloggerだと各blogのサイトは異なるので、それぞれに APIキーを取得して管理する必要がありそう。 僕のようにblog間の記事移動が多い(下書きblogから移動したりとか)場合は、これはちょっと面倒です。

そこで自身のドメイン rinco.jp でAPIキーを作成し、ここにマップ用のhtmlファイルを置くことにしました。 以下のようにiframeでページに組み込みます。

<iframe
src="http://rinco.jp/blog/yamachan_gmap.html
?zoom=15&ll=35.711308,139.775582&w=400&h=300"
width="400" height="300"
scrolling="NO" frameborder="0"
marginwidth="0" marginheight="0"
></iframe>

マップ用のhtmlは個別に用意するのも面倒です。 そこで Google MAPS サイトにあるサンプルをベースに、URLパラメータを参照するようにload()関数を拡張してみました。 使用している jp.rinco.url.parse() 関数は コチラ を参照。

function load() {
if (GBrowserIsCompatible()) {
var mArea = document.getElementById('maparea');
mArea.style.width=jp.rinco.url.parse("w","400px");
mArea.style.height=jp.rinco.url.parse("h","300px");
var zoom=jp.rinco.url.parse("zoom", "16");

var ll = jp.rinco.url.parse("ll", "35.68,139.76");
ll = ll.split(',');
var point = new GLatLng(ll[0],ll[1]);

var map = new GMap2(mArea);
map.addControl(new GSmallMapControl());
map.setCenter(point, +zoom);

var marker = new GMarker(point);
map.addOverlay(marker);
}
}

ただこのマップ用のhtmlファイル、利用制限をかけていないので、現時点ではどんなサイトからでも利用できてしまいます。 上記コードを利用するのは無論かまいませんが、マップ用htmlを直接利用するのは避けてくださいね。 APIキーをきちんと取得し、自分のサイトにマップ用htmlを設置してください。