« Movable Type 4 RC1にアップグレード | メイン | Movable Type 4（製品版）にアップグレード »
2007年8月 8日
Google Mapsの埋め込み
MovableTypeにGoogle Mapsを埋め込みします。
ただMovableTypeのエントリー記事にGoogleMapsを埋め込むのは、他の方でもされていますので、ちょっと違ったアプローチ方法を取ってみました。
■設定条件
「表示する地図の緯度・経度をエントリー記事から指定できるようにする」
つまりあらかじめ決められた座標の地図をエントリーに表示させるのではなく、そのエントリーごと好きな座標の地図を表示できるようにするという条件を設定しました。
■実施手順
Google Mapsを利用するにはGoogleアカウントを取得後、Google Maps API-Sign Upで、API Keyを取得する必要があります。
今回私が取った方法は、MovableTypeのテンプレートにあらかじめAPI Keyを埋め込んでおく方法。
■注意点その１・・・文字コードUTF-8。
Google Maps APIを利用するには文字コードがUTF-8でなくてはなりません。
当ブログはUTF-8で記述しているので問題ありませんが、Shift-JISやEUC-JPでエンコードしている場合は、インラインフレームで呼び出すしかありません。
■注意点その２・・・Javascriptは<head>タグ内に。
FirefoxやOperaなどのブラウザでは問題ないのですが、IEでは<body>タグ内に、Javascriptを記述して直接GoogleMapsを呼び出そうとするとエラーが表示されます。
今回のケースのように、どうしてもエントリー記事内にJavascriptを記述する必要がある場合が出てくるでしょう。
そのときは、<body>タグ内のJavascriptはfunction化します。
<body onload="onLoad()" onunload="GUnload()">というように、<body>タグのonloadでそのfunctionを呼び出します。
※ちなみにonunload="GUnload()"はIEのメモリリーク対策用だそうです。
■ブログのテンプレート
各テンプレートの<head>内に、Google API Keyのソースを記述します。
同時に、緯度と経度、ふきだしに表示させるテキストを引数で受け取るためのスクリプトを記述します。
こちらは外部ファイル化したほうがスマートですが、説明を簡素化するため<head>タグ内に記述します。
引数lat、lon、lotに緯度・経度・文字テキストを受け渡します。
上記で記載の<body>タグのonloadを忘れずに！
<script type="text/javascript">
//<![CDATA[
function load(lat,lon,lot) {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(lon,lat), 2);
var point = new GPoint(lon,lat);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode(lot),offset);
}
}
//]]>
</script>
■エントリー記事の記述例
ブログのエントリー記事内のGoogleMapsを表示させたい箇所に下記のように記述します。
<script type="text/javascript">
function onLoad() {
load(34.675813, 135.5037,"ハートンホテル南船場");
}
</script>
■実施の埋め込み例
2007年10月6日修正。実際の埋め込み例を削除しました。
理由はいちいちgoogleにアクセスして、ページが重くなるからです。
「Google Mapsの埋め込み（その２）」の記事を参照
参考サイトは下記の通り。
■Google Maps API - Sign Up
http://www.google.com/apis/maps/signup.html
何はともあれ、ここからスタート。
サーバーでGoogleMapsを利用するためにはAPI keyを取得する必要があります。
そのサインアップサイトです。サーバーによってKeyコードが違いますので、案件ごとサインアップする必要があります。
■Geocoding - 住所から緯度経度を検索
http://www.geocoding.jp/
GoogleMaps上での緯度経度の数値を取得するためのサイト。でも微妙にずれたりしますので、数値を鵜呑みにせず、本当にその場所であっているか確認・調査が必要です。
■Google Maps簡単作成ツール：GMapCreator
Google MAPS APIプログラミングにある便利なツール。
http://www.geekpage.jp/web/google-maps-api/gmapcreator/
Javascriptのソースコードを表示してくれます。これで吐き出したソースを組み合わせて使うのが、一番の近道かもしれません。
■Google-Maps-API-Japan
http://groups.google.com/group/Google-Maps-API-Japan/topics
GoogleグループのGoogleMapsディスカッションです。
自分がつまづいたところは、たいてい他の誰かもつまづいています。その誰かは、ここで質問を投げているケースが多いです。疑問点が出たら、まずここで答えを探しましょう。
■Google Maps入門
http://www.ajaxtower.jp/googlemaps/index.html
下記のオライリーのサポートページより説明がわかりやすいです。
■汎用Google Maps APIスクリプト KsGMap
http://www.ksgmap.jp/index.html
GoogleMapsを利用しやすくしたスクリプト。これ、とても便利です。
■Google Maps Hacks サポートページ
http://www.marlin-arms.co.jp/gmh/index.html
オライリーから出版された初期のGoogleMaps本の解説ページ。今となっては情報が若干古いです。
■Flashコンポーネントダウンロードサイト
http://www.afcomponents.com/components/g_map/
FLASHにもGoogleMapsが組み込めたりします。
ただし、AJAX(Javascript)ほど、自在にカスタマイズできません・・・（と思う）
投稿者 lepracaun : 2007年8月 8日 01:12
トラックバック
このエントリーのトラックバックURL:
http://www.lepracaun.info/mt4/mt-tb.cgi/55
