つくもノヲ”Ｘ="1≠ 052

↑ 表示されない時はフレーム内で右クリックして更新してください

上の地図はiframeタグを使って、他のウェブサイトで作成したgooglemapsを表示しています。
この地図を表示させるには、このウェブサイト用にAPIキーの取得が必要になります。

当初はこのブログに表示する方法でiframe以外の方法を探していましたが、
googleのヘルプや他のサイトを見る限りはなさそうなので、とりあえずこの方法を採りました。

噴出しやマーカーはgooglemaps APIの機能をjavascriptで呼び出すことで表示しています。
このため、APIを使いこなすにはjavascriptの知識が必要になります。
APIの使い方は、英語のドキュメンテーションよりも個人のサイトを参考するほうが理解が
早いと思います。

次のサイトはこの地図を作るにあたってかなりお世話になったところです。
サンプルもあり、非常にわかりやすいです。

Google MAPS APIプログラミング

結果的にむずかしいことは何もやっていませんが、完成するまでが長かった感じです。
それはつぎにあげるような罠が待っていたからです。




【googlemapsAPIキー取得ページの罠】

まず、googlemapsAPIキーを取得するためにキー取得ページで地図を表示するURLを
登録するわけですが、はじめは次のURLで登録しました。

http://www.geocities.jp/excelover/maps.html

これを登録すると、取得ページでは次のURLとして登録されます。

http://www.geocities.jp/excelover/maps.html/

取得ページでは最後に余計な「/」が追加されるため、googlemapsAPIでは
違うURLとして解釈するようで、エラーメッセージが出て地図が表示できませんでした。

この罠に気づくのに、かなり時間がかかりました。・・・・・・orz


地図を表示するには、前者のURLを次のようにします

http://www.geocities.jp/excelover/

これでやっと地図が表示できるようになりました。



【空白文字の罠】

地図で噴出しにコメントを入れたり、マーカーを追加したりする際に、
javascriptをいじるわけですが、innerHTMLを使ってHTMLタグで囲まれた
空白文字を含む文字列を表示しようときにその罠がありました。

ただ、文字列を表示させるだけなら何も問題にならなかったのですが、
空白文字を含める場合は、innerHTMLでpreタグは使えないことが発覚したのです。

preタグは入力したとおりに文字を表示します。
だから、これでいけると思ったのですが････

いろいろと探した結果、空白文字は特殊文字として扱われていることがわかりました。
空白文字は、つぎの3通りのいずれかを指定すると空白を挿入してくれます。
(どうやっても文字表記と16進表記のコードが表示されません・・・・)

(文字表記) 　　
 　(10進表記)　　
  (16進表記)

googlemapsで使えるのは文字コードの関係からか、 　か　 でした。
空白2文字分を文字列の先頭に入れる場合は例はつぎのようになります。

document.getElementById("show_y").innerHTML　=　   "文字列";

これら2つの罠のためにここまで作るのに時間がかかったというわけです。

地図にラインを引いたり、特定の座標へ移動させる関数は
jsファイルにまとめて、ここから読み込んで実行させています。
参照する場合は保存してから、テキストファイルで開いてください。

関数ファイル(javascript)

将来的にiframeタグはサポートしなくなる可能性があるので
iframeを使わずにこのブログに地図を埋める手段があればよいのですが。

たとえば、geocitiesなどの無料ホームページで使用しているような簡易ファイルアップロード
なんかがこのbloggerに搭載されて、画像を埋め込むように地図が埋め込めるように
なればいいなとか。