Googlemapの設置の仕方
最初プラグインで試みましたが、残念ながらすべてが一筋縄ではいきません。
「MTGoogleMaps」,「MTMapper」も試しましたが、面倒です。
簡単な方法つくりました。
Movvletypeの環境設定から「テンプレート」に入ります。
「テンプレートを新規作成」をクリックして新規のページを作成します。
テンプレート名：googlemap
出力ファイル名：google.html
このテンプレートにリンクするファイル：無記入
テンプレートの内容
<!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=1&key=abcdef"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.540707, 35.7649), 4); map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("Here!"));
}
//]]>
</script>
</body>
</html>
これらのタグをそのままテンプレートの内容にコピー・ペーストを行います。
ただし、
上から6行目の
1&key=abcdef
の「abcdef」に取得したAPI Keyをいれます。
次に
下から六行目の
(new GPoint(139.540707, 35.7649), 4)
に目的地の経度・緯度を入れます。
http://www.geocoding.jp/
ここで目的地の経度・緯度調べられます。
＊注 ここgeocodingの表示は緯度・経度が逆になってますので注意！
Googleよりアカウント取得はここに入って登録して下さい。https://www.google.com/accounts/NewAccount
次に、「Google Map API」のkeyを取得します。
http://www.google.com/apis/maps/signup.html
このとき、URLの表記はブログがある位置を示します。
通常例
http://www.xxxxxx.com/~xxxxx/blog
とします。
bowwowpalをご利用のみなさんは
http://www.bowwowpal.com/~xxxxx/weblogの表記になります。
もちろん
「〜xxxxx」にはご自分の名前を入れて下さい。
このサイトURLを間違えると、Googleが反応しません。
書けたら保存をして再構築して下さい。
ここまでくれば、あとはエントリーに下のタグを貼り、自分のURLと入れ替えて終わりです。
<iframe src="http://www.xxxxxxx.com/~xxxxxx/weblog/google.html" width="400" height="400" scrolling="no" name="menu" frameborder="0" align="center"></iframe>
自分のURLをかならず入れ替えてください。場所は分かりますね。
このタグだけで、ブログのエントリーに地図が表示出来ます。拡大・縮小・移動もできます。
エントリーに書くタグは毎回同じです。
最初はGoogleからAPI Keyの取得がありますから、少し面倒ですが、次からは上記をコピー・ペストして作った「googlemap」のテンプレートの経度・緯度を書き換えれば目的地の地図が書けます。
内緒です。本当は教えたくないです。企業秘密です。これは本当に簡単です。
ところが、WindowsのIEでは表示出来ない様です。Firefoxは確認出来ました。
MacでもIEが表示出来ません。SafariとFirefoxは確認出来ました。