ファッションブログや家業の関係でGoogleMapsを使ったサイトをいくつか作ることになりました。知識がない人でも簡単にGoogleMapsを扱えるツールはいくつか出ているようですが、手になじんだMovableTypeを使って作りたいと思い、WWW WATCHさんのMapsBlogテンプレートを使わせていただくことにしました。機能もデザインも兼ね備えたすばらしいテンプレートです。
設置は最小限の手順で済むように配慮されており、配布元の説明通りに実行すれば難なく済みました。注意することといえば、テンプレート公開当初とはGoogleMaps APIのバージョンがかわっているため、『v=1』となっている箇所を『v=2』にかえることぐらい。現在目的別にあれこれカスタマイズしてみているのですが、その過程で気づいたことなどを書いていきたいと思います。
まずは家業の関係で試作中のブログを作る過程でのメモ。デフォルトのテンプレートでのトップページは、関東を中心に表示されるようになっています。ですが今回は大分県の地図しか使わないため、トップページの初期画面を大分県にズームした状態で表示されるように設定することにしました。
変更するファイル:js/maps.js
まずはこのファイルをテキストエディタで開きます。書き換える箇所は1行のみ。139~とあるのが経度、35~とあるのが緯度。そのカッコ外にある数字がどうやらズーム率らしいです。
map.centerAndZoom(new GPoint(139.770491,35.677884), 11);
この部分を以下のように書き換えました。 ここで注意しなければならないのが、v1とはクラスがかわっていること。(参考:地図クラスがGMapからGMap2へ(AllAbout))前のクラスでも動くには動くけどせっかくなので換えておきます。緯度・経度の順序に注意。
map.setCenter(new GLatLng(33.122601,131.621704), 9);
大分市と書いてある位置を中心にしたら収まりが悪かったので調整。これで大分県がいい感じに画面におさまりました。
最初、数字を大きくすればズームするんだ!と思って80と書いたら「日本ちっちゃ!」状態に。数字は小さいほど拡大されるそうです。07.0216訂正 これはv1での話でした。v2では逆に数字が大きいほどズームされます。
位置を探るのには以下のページが便利です。
次はMovableType3.3のタグ機能を取り入れる方法を紹介します。
コメント