MovableTypeにGoogle Mapsを埋め込みします。
ただMovableTypeのエントリー記事にGoogleMapsを埋め込むのは、他の方でもされていますので、ちょっと違ったアプローチ方法を取ってみました。
■設定条件
「表示する地図の緯度・経度をエントリー記事から指定できるようにする」
つまりあらかじめ決められた座標の地図をエントリーに表示させるのではなく、そのエントリーごと好きな座標の地図を表示できるようにするという条件を設定しました。
■実施手順
Google Mapsを利用するにはGoogleアカウントを取得後、Google Maps API-Sign Upで、API Keyを取得する必要があります。
今回私が取った方法は、MovableTypeのテンプレートにあらかじめAPI Keyを埋め込んでおく方法。
<script type="text/javascript" src="http://maps.google.co.jp/maps?file=api&v=1&key=あなたの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 src="http://maps.google.com/maps?file=api&v=2&key=あなたのKey" type="text/javascript"></script>
<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を表示させたい箇所に下記のように記述します。
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
function onLoad() {
load(34.675813, 135.5037,"ハートンホテル南船場");
}
</script>
■実施の埋め込み例
2007年10月6日修正。実際の埋め込み例を削除しました。
理由はいちいちgoogleにアクセスして、ページが重くなるからです。
「Google Mapsの埋め込み（その２）」の記事を参照
