ぐりぐりと動かすGoogle Maps。
非力且つナローバンドな我が家のマシン環境では
なかなか辛い部分がなくもない。
でもそんな環境は今やマイノリティ。
ユーザビリティ向上とカッコつけの目的で
Google Mapsをワイフのサイトのアクセスページに
組み込んでみた。なんつーか、よく知らんけど
こーゆーのをWEB2.0というんでしょうか。
(この言葉流行らせたヤツ誰だ。ちゃんと定義してからモノを言え)
なんてったってわたくしはタダの素人。
javascriptもXHTMLもわからぬ。
というわけでいろんなサイトでお勉強。
PC系の本は買わないのがポリシーなのだ。
勉強開始〜完成まで1時間くらいかかった。
出来上がったページ。

地図本体ページ。

できあがった時はワイフに
「みてみて、スゴいでしょー」
とかテンション高かったんだけど
冷静に見りゃきわめてフツーだ。
しかも航空写真にすると
建 物 が な い 。

屋外レッスンかと。線路脇の空き地でやってるのかと。
(実際は綺麗なスタジオがちゃんとある)
まぁ、いいです。作り手の自己満足。
わかったことを備忘録として列挙。
(タグの<>は半角に直していらん改行を消すこと)
--------------------
■ 掲載するページ(access.html)において
・エンコードはutf-8のみらしいのでshift-jisでページを作っている輩は
iframe扱いで別ページを組み込むのが簡単らしい。
というわけで地図ページ(googlemaps.html)をaccess.htmlに組み込む。
大きさや枠無し、スクロールバー無しの指定をする
<iframe src="googlemaps.html" width="460px" height="300px"
scrolling="NO" frameborder="0"></iframe>--------------------
■ 地図本体ページにおいて(googlemaps.html)
・どアタマでXHTMLだよんと宣言したほうがいいらしい
<!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"
xml:lang="ja" lang="ja" dir="ltr">・エンコードはutf-8でしなきゃいけないからHEADにそう書く
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />・BODYのどアタマにdivで地図の大きさを定義する
<div id="map" style="width: 460px; height: 300px"></div>・下のおまじないを入れる
(
Googleで予め取得しておいたキーを●●●●に入れる)
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&v=1&key=●●●●">
</script><script type="text/javascript">・さらにおまじないを続ける
//<![CDATA[
var map = new GMap(document.getElementById("map"));・地図の中心を緯度・経度で指定する。
カッコの最後の数字は表示のズーム具合
map.setCenter(new GLatLng(35.65721343299226, 139.68881249427795), 16);・地図の移動/拡大縮小パーツを表示する場合はこれを追加。
GSmallMapControlと書くと拡縮のゲージがなくなる
map.addControl(new GLargeMapControl());・地図/航空写真/地図+写真の選択パーツを表示する場合はこれを追加
map.addControl(new GMapTypeControl());・ここだよマークを入れる場合はこれを追加。
マークを置きたい緯度・経度を指定する
var point = new GLatLng(35.65721343299226, 139.68881249427795);
var marker = new GMarker(point);・ここだよマークに吹き出しを入れる場合はこれを追加
'<div以降、</div>まではフツーのhtmlでだいじょぶ
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindowHtml(map.getCenterLatLng(),
'<div style="width: 200px">あいうえお</div>', offset);・最後におまじないを加えておしまい
//]]>
</script></body></html>--------------------