総トップページにジャンプ

  Googleマップ入門


○はじめに
○準備作業
○「Java」と「Java Script」
○キーとサンプルコード
○サンプルコードの改良
○「Google Maps API」を用いたプログラム例
「Google Maps API」を用いたプログラム例に関する注意!
○経度と緯度
○東京のへそ
経度・緯度を求めるツール
○ページに直接貼り付ける
○ページに直接貼り付けてわかったこと
○ページに直接貼り付ける方法の問題点
○最初からAPI方式で作成したモジュール
○最初からAPI方式で作成したモジュールについてわかったこと
○同じホームページのアドレス(URL)が二つ存在しないということで識別?
○「同じホームページのアドレス(URL)が二つ存在しないということで識別?」の解決方法
○おわりに


○はじめに

 Googleのマップを使おうとすると、かなり細かい作業が必要になります。後で忘れてしまわないように、ここにメモっておきましょう。


○準備作業

 「Google Maps API」を使用するためには、最初に登録が必要です。つまり、「Googleアカウントの取得」と「Google Maps API key」の取得をしなければなりません。すると、サンプルコードが与えられます。
 なお、「Google Maps API」の「API」は「Application Program Interface」の略です。実際には、「Google Maps API」は「Java Script」で記述したライブラリです。ときには、XMLの知識が必要な機能もあります。


○「Java」と「Java Script」

 「「Google Maps API」は「Java Script」で記述したライブラリ」と書いてあるので、ひとまず安心。私にも、何とかできるのではないか。大がかりな「Javaアプリケーション」は論外としても、前に「Javaアプレット」をやったときには閉口。何回もコンパイルをして、まったく面倒な手続きであったからだ。それはインタプリタを用いても同じで、何とも複雑でかつ単調な作業であってうんざり。そんなことを考えて、今まで「Google Maps API」に近づかなかったが、どうしても必要なので恐る恐る調べて見ることにした。
 そして、まず「Java」じゃないことが改めてわかってやれやれ。Sunの苦いテーカップを飲まなくてよいので、ほっとした次第。それでも、古希を控えた飽きっぽい爺にはムリかなぁ?


 間単に考えると、HTML文の中に「Java Script」文があると思えばよい。復習のために、その構造例を。

  「HTML」文と「Java Script」文

 上のプログラムは、実行後に「表示」→「ソース」で見れるが、改めて記述すると次のとおり。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title>「Java」でなく「JavaScript」のテスト</title>
</head>
<BODY>

−−−この行は「HTML」の表示−−−<BR>


<SCRIPT language="javascript">

<!--

document.write("===この行は「JavaScript」で書かれている===<br>");

// -->


</SCRIPT>

−−−ここは再び「HTML」−−−

</BODY>
</HTML>


○キーとサンプルコード

 具体的な内容は、次のようになっていました。
 なお、キーは固有のホームページと関連付けをしているようで、その同じホームページのアドレス(URL)が二つ存在しないということで識別をしているようです。(しかし後でわかったことですが、ドメイン側のURLを何とかして解決する必要が出てきました。)


Your key is:

ABQIAAAAe034yF9JM8t8BGiDYPBxXBTK5K9-KvtnJuErGYLDuCY7JnPxnBRw4gEOicnvU6nAitigEuu_jigwNA


This key is good for all URLs in this directory:

http://www.geocities.jp/rikwhi/


Here is an example web page to get you started on your way to mapping glory:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=ABQIAAAAe034yF9JM8t8BGiDYPBxXBTK5K9-
KvtnJuErGYLDuCY7JnPxnBRw4gEOicnvU6nAitigEuu_jigwNA"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>


Check out the API documentation for more information.


 上記のオリジナル「Google Maps API − Thank You.mht」は、ここをクリックすると見れます。


○サンプルコードの改良

 サンプルコードは、そのまま実行するとエラーが出る場合があります。そこで、上の内容を若干変更したり地図の大きさを変えて国内の場所にもってきたりしました。 

  改良前のサンプルコード……地図などは英語版のままですのです。

  改良をしたサンプルコード……地図の大きさや場所を変更しました。


○「Google Maps API」を用いたプログラム例

 一例として、セレクトメニューを示しておきましょう。駅周辺のプチさん(プティ散策)をしたときの訪問先などの整理をするために作り始めたものです。対象とする場所が、画面の中央に出てきます。中央に「+」などのマークを置いてもよいでしょう。

  セレクトメユーのプログラム例


 このセレクトメニュー方式は、やってみるとなかなか使いやすいようです。ふつう、ずらずら〜っと項目を並べてしまうと、大きな場所が必要になります。しかしセレクトメニューにすると、開いたときだけ一時的に下に大きくなるので、あまり不自由を感じません。下のほうに場所が足りないときには、上向きに開いてくれたりします。よく見る県別や生年を登録をするフォーマットに、利用されるゆえんでしょう。

 セレクトメニュー自体は、独立させて該当ページから呼ぶようにしておけば、マルチウィンドウ(別画面)で参照できるので便利です。つまり、地図を見ないときには、「最小化」しておけばよろしい。そんな方法を「宿河原駅周辺」で確かめてみました。

 ページの作り方は、手数のかからない方式にします。
 ホームページビルダーなどで、地図自体も作ってしまうのです。そのときは、「HTMLソース」タブを利用します。また、「経度・緯度ツール」もホームページビルダーに読み込んでおいて、その「プレビュー」モードで二つの数字を求めます。そして、コピーをして「HTMLソース」になっている実際のページにペースト(貼り付け)をします。私は面倒なことが嫌いですから、なるべく簡単で最小の手続きですませたいのです。


○「Google Maps API」を用いたプログラム例に関する注意!

 この方式は安定をしていて扱いやすいので、今後とも改良をしながら用いていくつもりです。そこで、ここにいくつかの注意を記しておきましょう。

(1) 最初の画面では、その駅周辺がやや低い倍率で表示されています。つまり、縮尺が大きくしてあるのです。なぜならば、その駅の位置関係が他の駅などと一緒に見れれば、全体がわかりやすくなるでしょう。

(2) 「どの場所ですか?」に場所を指定すると、そこが画面の中心に出てきます。縮尺は、最初の画面よりも、やや少し小さくなっています。その場所について付近の詳細がわかるようにです。

(3) 「どの場所ですか?」をしても、画面の中心に指定した地名がない場合もあります。そのときは、スライダーで縮尺をあげてみてください。もしも、いちばん上までスライドしても地名がないときは、最初から地図にその記述がない場合なのです。

(4) 何回もやっているうちに、わかりにくくなる場合があります。そのようなときは、再度「どの場所ですか?」をしてみるのもよいでしょう。

(5) また、「最新の情報に更新」アイコンをクリックしてもかまいません。そうすると、(1)の状態に戻ることになります。なぜならば、「どの場所ですか?」に「駅周辺」の駅名を入れると、縮尺が変わってしまうからです。


○経度と緯度

 地球上の位置は、経度と緯度によって与えられます。例えば、東京都の京王線にある府中駅です。バスターミナルの隅に、下の写真のような緯度標がありました。誰も見ないので、何となくホームレスの人といっしょに暮らしているようですね。




 東経は、139度28分59度です。




 北緯は、35度40分10秒です。




 おまけに、海抜も示しておきましょう。この地点は、海抜56.50メートルです。




 このような経度・緯度を表示してあるところは、身近にもかなりあるようです。しかし、それに気付かずに過ごしてしまうことが多いみたい。例えば、代々木大山公園にあった日時計。




 その左側、立って時刻を読む場所。読みにくいので、写してきました。「北緯35°40′06″標高38m82 東経139°40′42″」とあります。なお、周囲の模様は上「N」、右「E」、下「S」、左「W」という文字の一部です。向きは、すべて中央から見ます。




 この学校の入り口にある標識は、一目瞭然。




 なぜならば、横に回って見るとちゃんと書いてある。




 そもそも東経とは、イギリスのグリニッジ天文台があった場所を通る位置の子午線を0度として、東方へ180度までの経度。西経も180度あるので、全周は360度となる。
 また北緯とは、赤道から北の緯度。つまり、赤道を0度とし、それより北極の90度までを角度で示しています。

○東京のへそ

 神社の掲示板に「東京のへそ」と書いてあったので何のことかと思ったら、東京都の中心だそうです。へそ(臍)が人間の中心であるからでしょう。そして、その場所は
  東経139度38分45秒 北緯35度40分54秒
と書いてあります。
 さて、その場所はどこでしょう。





○経度・緯度を求めるツール

 経度と緯度を求めるツールを作っておくと便利です。実際には、クリックした場所の緯度・経度の順に、価が得られます。日本の場合ですから、それは「北緯」と「東経」の価になっています。ただし、「度」以下の「分」と「秒」は、「度」の十進数に換算して与えられます。
 ついでながら、専門家の間では「度」「分」で経度・緯度を言うようです。つまり、分の下の「秒」は「分」の十進数。テレビで地震の震源地について、気象庁の係官から発表があったときに、そのように言っていました。

  経度・緯度ツール


○ページに直接貼り付ける

 キーを指定しないで、Google地図をページに直接貼り付けることもできます。むろん、マイマップを利用することができるので、位置マークを付けて左側のサイトから場所を探したりすることもできます。ただ、そのときは吹出しの形や中に記述した文字などを変更することができないのではないでしょうか。
 次に1行開けて、直接多摩市をテストとして貼り付けてみましょう。(見やすくするため)


大きな地図で見る
(この行を含めて、以下2行空き:上の行の「……で見る」の後には改行を入れたほうが見やすい。)

○ページに直接貼り付けてわかったこと

 上の地図について、わかったことを以下にメモしておきましょう。

(1) 上のように貼り付けるには、まずどうしたか?

 Google地図を表示。地図にある[このページへリンク]をクリック。
 [埋め込み地図のカスタマイズとプレビュー]で確認。
 「3.サイトに地図を埋め込む場合はこのHTMLをコピーして貼り付けます。」を行う。


(2) ホームページビルダーで編集(「プレビュー」モード)をしている時点

 下の「実行時、つまりこのホームページを閲覧時点」と同じ効果があるんじゃないでしょうか。正直に言うと、実際には逆なんです。つまり、いちいち切り替えて文章をインプットするのが面倒なので、ホームページビルダー上で確かめているんですが、……
(その場合はクリックボタンが影付きの素晴らしい形になる。しかし、画面を最大にしても、ホームページビルダーの編集画面の大きさにしかならない。右側の「属性/ドキュメントアウトライナ/編集モード」を非表示にすると、大きくなるが私は機能などを試すときは、戻したりするのが面倒なのでしない。)


(3) 実行時、つまりこのホームページを閲覧時点

 「大きな地図を見る」をしないでも、マークをクリックすると吹出し情報が出る。むろん、マウスをそこにポイントすると自動的に吹き出しが出るようにできる。)
 しかし、新たな修正や追加などは「マイマップ」モードでないとできない。

 「大きな地図で見る」をクリックすると、マイマップモードで出てくる。
 (一覧が出てくるので、他の「自分で作った地図」も見れる。)

 [編集]ボタンをクリックすると、
 [ハンドツール][目的を追加][直線を引く][シェイプを描く]の4つのアイコンが左上に出る。

 いろいろやった最後に、
 [保存]する。すると、そこは薄い[保存済み]になる。
 [完了]をクリック。すると[編集]ボタンになる。
 そして、マップを[閉じる]ボタンで終了すると、そのページも閉じてしまう。


(4) その他(むろん[編集]モードのとき)

・ 「大きな地図で見る」をしたときの左側の印を付けた位置項目の上から下への順番は、ドラッグで上下の位置を移動できる。

・ 大きな地図を別画面にするには、最初の貼り付けた内容のソースが、

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?hl=ja&amp;ie=UTF8&amp;msa=0&amp;msid=107609797887756492896.00044bcbb9d0e21a89c4d&amp;s=AARTsJqD9F--8vSsAIHHz1GbqIwj5DSlgA&amp;ll=35.63972,139.439507&amp;spn=0.066964,0.109863&amp;z=13&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps/ms?hl=ja&amp;ie=UTF8&amp;msa=0&amp;msid=107609797887756492896.00044bcbb9d0e21a89c4d&amp;ll=35.63972,139.439507&amp;spn=0.066964,0.109863&amp;z=13&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small><BR>

のようになっている。そこで、「△target="_blank"」を挿入すると、別画面で大きな地図が見れるようになります。つまり、下のように加工をすればよいのです。

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?hl=ja&amp;ie=UTF8&amp;msa=0&amp;msid=107609797887756492896.00044bcbb9d0e21a89c4d&amp;s=AARTsJqD9F--8vSsAIHHz1GbqIwj5DSlgA&amp;ll=35.63972,139.439507&amp;spn=0.066964,0.109863&amp;z=13&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps/ms?hl=ja&amp;ie=UTF8&amp;msa=0&amp;msid=107609797887756492896.00044bcbb9d0e21a89c4d&amp;ll=35.63972,139.439507&amp;spn=0.066964,0.109863&amp;z=13&amp;source=embed" style="color:#0000FF;text-align:left" target="_blank">大きな地図で見る</a></small><BR>


・ ホームページ閲覧時に、「大きな地図で見る」にする。「マイマップ」モードで出てくるので、その画面で「編集」をする。「完了」をしないでも、その結果は残るらしい。つまり、上の手順で別画面にしておけば、本文を見ながらマークを付ける場所を必要に応じて、次々と追加できる。むろんそのときに、説明のインプットやマークの種類の変更ができる。(残念ながら、吹出しの中のデザインについては、今のところどうして変えるのかがわからない。煩雑になるので、2行目の
  rik 昨日更新
などと、最下部にある
  乗換案内 ここへ到着 - ここから出発
   付近を検索

などは、いらないのではないか。
 API方式のサブモジュールを呼出して、そのようにできるのかもしれない。)


・ しかし、上の方法で少しずつ追加をしていけば、次第に地図は完成をする。それは、それなりに優れたことで、大いに利用すべきではないか。


・ マイマップを更新すると、ホームページに貼り付けられた地図も、再読み込みをすると自動的に更新する。そのときに、ホームページ側はFFFTPによる該当ページのアップデートをしなくてもよい。すでに、地図を作成する必要情報は転送されているからである。したがって、地図上の追加などが気軽にできる。
 つまり、本文を見ながらマイマップを作成できる。そのとき、マイマップを最大化しないこと。なぜならば、そうするとホームページビルダー上でドラッグできるので、ページが参照しやすく都合がよい。


○ページに直接貼り付ける方法の問題点

 自分で作った地図が増えてきた。すると、次のような問題が起こった。
 最初は、自分で作った地図にチェックが入って、その下に[編集]ボタンとマークの場所が出た。しかし、いつごろからか「大きな地図で見る」をするといったんチラッと出るだけで、ふたたび全部のリストが「自分で作った地図」になってしまう。むろん、その下に「他の人が作った地図」と「注目の地図」。つまり、かつて出ていたマークの一覧がないのである。いったんチェックを外し、再度チェックをすると出てくる。しかし、それではホームページに訪問する人にはわからないだろう。
 上の「○ページに直接貼り付ける」にある「大きな地図で見る」も、いつの間にかそうなっちゃった。


 さらに、下のほうの場所についてはマークさえも出なくなったしまった。
 基本的に、この方式を考え直さなければならない。


○最初からAPI方式で作成したモジュール

 上に説明を試みた「ページに直接貼り付ける」方法は、API方式の利用ではありません。したがって、自分自身のキーをインプットする必要がないのです。ここでは、API方式について考えてみましょう。地図の下に「大きな地図で見る」がないので、一目瞭然です。また、いまのところ左上の上下左右の「矢印四つ」と「+」「−」がありません。

  多摩市でのテスト


 上記で、わかったことを以下にメモしていきましょう。
 なお、現時点で上記のソースは、次のようになっています。今後は、いろいろと追加をして次項に書き足していきましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAe034yF9JM8t8BGiDYPBxXBTK5K9-KvtnJuErGYLDuCY7JnPxnBRw4gEOicnvU6nAitigEuu_jigwNA"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.650, 139.447), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 640px; height: 480px"></div>
</body>
</html>


○最初からAPI方式で作成したモジュールについてわかったこと

・ API方式の地図であっても、左下のGoogleマークをクリックすると、大きな地図にできる。そのマークにポイントすると、「クリックするとGoogleマップでこの地域を表示します」と文字が出るが、やがて消えてしまう。そして、ふたたびは文字が出なくなる。(つまり、最初に一回しか出ない)

・ その「この地域を表示」画面は、「検索結果」タブになっている。そこで、「マイマップ」タブをクリックすると、API方式でない「ページに直接貼り付けた」地図と同じ状態になる。つまり、マイマップの状態になる。

・ 「直接に貼り付ける方法」と「API方式の貼り付け」との区別が、まだ私にはよくわからない。


○同じホームページのアドレス(URL)が二つ存在しないということで識別?

 やってみると、非常に具合の悪いことが生じる。
 私は、ホームページを「http://www.geocities.jp/rikwhi/」として登録をした。すると、そのホームページをそのドメインつまり「http://riksys.com」で立ち上げたときは、いざ地図を立ち上げようとすると



と出てしまう。
 まったく同じホームページになるので、何とかならないだろうか。
 しかし、そのメッセージに[OK]をすると、後はふつうと同じマップ表示がなされて、そのまま先に進めるみたいである。問題は、このメッセージを表示させない工夫!


 もう一度、「http://www.geocities.jp/rikwhi/」から始めないとダメなんだろうか。
 ダイレクトにそのページを呼んでも、例えば下記をドメインから作ったときは、上と同じでダメ。

  http://www.riksys.com/eki_syuku_kuji_tuda/eki_syukugawara.html

 やはり、「http://www.geocities.jp/rikwhi/」から下記を作り直さなければならない。

  http://www.geocities.jp/rikwhi/eki_syuku_kuji_tuda/eki_syukugawara.html

 まったく、便利なようで不便なものだ。仕方ないので「Google側で支給している」かもしれないドメイン用の「イクイバレント」機能を探してみよう。それはともかく、一例として「セレクトメニュー」のソースを表示。


セレクトメニューのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title>セレクトメニュー</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAe034yF9JM8t8BGiDYPBxXBTK5K9-KvtnJuErGYLDuCY7JnPxnBRw4gEOicnvU6nAitigEuu_jigwNA"
type="text/javascript">
</script>


<script type="text/javascript">
//<![CDATA[
var map;
window.onload = function() {
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.672188, 139.480471), 14);
map.addControl(new GLargeMapControl());
// イベント設定
var selObj = document.getElementById("geoPoint");
selObj.onchange = function() {
var gp = this.value;
if (gp == "") return;
var x = gp.split(",")[1];
var y = gp.split(",")[0];
map.setCenter(new GLatLng(y, x), 16);
}
}
//]]>
</script>

</HEAD>
<BODY>
<DIV id="gmap" style="width: 640px; height: 480px"></DIV>
<form><select id="geoPoint">
<option value="">どの場所ですか?</option>
<option value="35.672139, 139.480469">府中駅</option>
<option value="35.667468, 139.478985">大国魂神社</option>
<option value="35.662404, 139.485683">東京競馬場</option>
<option value="35.664618, 139.499437">東郷寺</option>
</select></form>
</BODY>
</HTML>


○「同じホームページのアドレス(URL)が二つ存在しないということで識別?」の解決方法

 上記を解決すために、二つ目のAPIコードを取得した。


Your key is:

ABQIAAAAe034yF9JM8t8BGiDYPBxXBQWDuoNr0KD2Y5sr7Kro5HPHnAOmhSyV5ACQfLcD84a-LzUbGGoOG4ahA


This key is good for all URLs in this directory:

http://riksys.com/


Here is an example web page to get you started on your way to mapping glory:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAe034yF9JM8t8BGiDYPBxXBQWDuoNr0KD2Y5sr7Kro5HPHnAOmhSyV5ACQfLcD84a-LzUbGGoOG4ahA"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>


Check out the API documentation for more information.



 前に示したものとは「API key」が異なっています。なぜそんなことをしたかというと、二つ目の「API key」を取得して、どちらからでも利用できるようにしようとしているからです。なお、問題が解決するまではドメインであっても互いに異なるURL表示ですから、このページ(ホームページ)の立ち上げ方法によって、もしかしたらエラーが発生して下記の地図が表示できないかもしれません。(2008年5月14日現在)

  二個目の改良前のサンプルコード……キーの記録と保存のために。


  上記を二つのキーいずれでもOKに!……まだ、テスト中です。


○おわりに

 いろいろとやってみたが、マイマップ方式ではデータが多くなると、何らかのはずみで崩れてしまう危険があります。おそらく、リンクなどに不都合が生じるのでしょう。そのようなことは、ホームページ作成の中でもいえることです。同じページの中にラベルを付けて、そこへジャンプさせるのですが、ホームページビルダーではその箇所が500くらいになったときに、崩れて機能しなくなった経験があります。テーブルが壊れたらしく、再度設定をしなくてはなりません。

 そんなわけで、地図の場合は安定性の高いAPI方式で作成したマップをホームページに添付することにしました。しかし、API方式で距離を求める機能を知りませんので、そんなときにはマイマップを起動します。つまり、手数のかからない面倒でない安全な方法を利用することにしました。


 今後、いろいろと工夫をしてみたいと考えています。でも、ホームページビルダーの「HTMLソース」タブでする作業は、文字が小さく細かい作業なので、疲れてしまうし何となくめんどうくさいなぁ。
 なお、手数を減らすために「Java Script」のテストは、ホームページビルダー内でやってしまう。つまり、この『青空のホームページ』の<google_map>というフォルダ(ディレクトリ)にテストプログラムも入れてある。

 その中で、危なっかしいものや自信のないものは、サンプルにひとまず漢字の名前を付ける。すると、うまいことにFFFTPが転送してくれない。「「.bak」や「.htm_」などのようにFFFTPが判断する」のではなく、ヤフーのプロバイダに引っかかって、そこで断わられるためでしょう。そんなわけで、テストをしてOKならば、改めてファイル名を英数字に直せばよい。結果的には、うまくできているもんだと、つくづく感心する。


Kuroda Kouta (2008.04.22/2008.09.07)