Movable TypeへのGoogle Map 設定手順の覚え
設置の実際
必ずしも簡単とは言えなかった、Google API を利用してのMapの設定が、非常に簡単に、しかも設定項目も弾力的に変更出来る形で出来るようになった。
http://www.geekpage.jp/web/google-maps-api/helloworld.php
こちら参照。
ここに解説されているscript を、簡単な順に適用させ、必要な機能分だけ順次追加してゆけば良い。
下の設置例は、Mapに「地図/衛星写真切り替えボタン」と、「拡大/縮小表示コントロールボタン」を付けたもの。
なお、初期化位置として「皇居」を指定し、その位置に「吹き出し」を表示させた。
初期化位置の取得も、上記サイト内のサンプルを使わせて貰った（下で解説）。
設置の手順
上記Map表示のスクリプト
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaaaa"
/* 上記文字列 aaaaaaa の部分に、Google Maps API キーを入力-------- */
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:600px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
/* 「拡大・縮小」「地図・写真切り替え」コントロール-------- */
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
/* 下記GLatLngの、最初の引数は、経度・緯度。２番目の引数は、デフォルトでの拡大率。緯度・経度の取得は、下で説明-------- */
map.setCenter(new GLatLng(35.68518697509635, 139.75296020507812), 16);
/* 吹き出し設定-------- */
map.openInfoWindowHtml(map.getCenter(),
"皇居<br> 東京都千代田区千代田1丁目");
}
//]]>
</script>
</body>
</html>
上記スクリプトを、そのままブラウザで表示させればMapが表示される。
Movable Typeで表示させるには、<script>―<script>を記載する。
