« zphotoの画像圧縮の品質に不満 | メイン | 尾瀬旅行記 »
2006年06月12日
Google Maps APIを使ってみました
旅行記などに使えたら面白いかな、と思い、Google Maps APIを導入してみました。APIのバージョンが1から2に上がったらしく、参考サイトの内容で若干ブレに悩みましたが、概ね簡単に使うことができます。
まずは、APIを使うためのキーを取得します。取得するには、Googleアカウントが必要です。Google Maps APIのキーは、利用したいURLを記入してボタンを押すだけで、入手できます。別のURL（ディレクトリ）に設置するには、キーを取り直す必要があるので、Google Maps API利用専用のディレクトリを作ったほうが便利かと思います。
キーを取得すると、サンプルコード（HTMLとjavascript）が表示されるので、コピペしてアップロード。すると、見事に地図が表示されます。結構感動～。でも、このサンプルのままだと寂しいので、マップコントロールなどを追加します。
//<![CDATA[
/*********************************************
* load
* 初期化用
********************************************/
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.781115, 139.231491), 13);
// ポイント
var point = new GLatLng(36.781115, 139.23149);
var html = "<div style='width:350px;font-size:12px;'>鳩待峠</div>";
var marker = createMarker(point,html);
map.addOverlay(marker);
}
}
/*********************************************
* createMarker
* マーカー生成
* point : マーカーを置く位置
* html : 表示する説明タグ
********************************************/
function createMarker(point, html) {
var marker = new GMarker(point);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
ところで、バージョンの違いでやられてしまったのが、GPointクラスとGLatLngクラスの違い。これって、緯度と経度が反対なんですね－－；。マーカーを指定してもまったく表示されず、しばらく悩みました。ズームを一番遠くにしたら、遥か世界の外側にマーカーがあって、ようやく誤りに気づいた次第です。。
主に参考にしたサイトはこちらです。
投稿者 bokupi : 2006年06月12日 12:17
トラックバック
このエントリーのトラックバックURL:
http://omoshiro-joho.com/c-i-mnet/cgi-bin/mt/mt-tb.cgi/1019