2017 06123456789101112131415161718192021222324252627282930312017 08

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック(-) | コメント(-)

FC2ブログに Google Maps API を使った地図情報を超手抜き表示 

ALPSLAB slide の FC2ブログでの設置方法というエントリーを書いたけど、FC2ブログGoogle Maps API を利用する方法を少し考えてみる。

ALPSLAB の地図情報表示は多彩で付加価値が高いものだが、個人・非商用の縛りがある。対して Google Maps API ならば、50,000PV/Day 未満なら制限が殆んど無いからだ。

ここでまず ALPSLAB の擁護をしておく…
ALPSLAB の地図情報表示は、単純HTML貼付けだけでなく JavaScript を使った拡大縮小・スクロールの可能なピンポイント表示、ルートマップ表示など多彩な表現を誇ってるし、地図ナビゲーションのUIの操作性も良い。ALPSLAB base へのトラックバックによる被リンク、Flickrとの連携など付加価値も高い。なおかつ設置・利用も簡単と、言う事無しな個人向けサービスなのです。

もちろん「実験サービス」でありアルプス社の技術展示場でもある ALPSLAB に、商用利用させろというのは、本末転倒で酷な要求なのはあきらか。商用サービスは別に用意されてるしね。

それでも Google なら… Google ならなんとかしてくれる! (AA略
  • 利用料金を徴収するサイト
  • 認証付きで非公開のサイト
  • 50,000PV/Day 以上のアクセスのあるサイト
Google Maps API は、以上の制限に引っかからなければ基本的に無料で使えるものと考えられます。 (Google Maps API Terms of Use 参照)

地図の表示が1箇所だけの場合

自社の地図を表示するだけとか、非常に表示件数が少なく、更新頻度も少ないだろうなという場合は、「珍品堂」さんの「【詳説】FC2ブログにGoogle Mapを埋め込む方法」でいけます。

殆んど Google Maps API のサンプルコードそのままでお手本的な手法とも言えます。地図部分だけを別HTMLにして iframe で表示しているので、FC2ブログ本体の影響を受けないのもメリットです。

反面、htmlをブログにアップロードできるレンタルブログは、FC2ブログ忍者ブログなど限られていますので、そこんとこがネックです。

また別HTMLを地図ごとに作成するため、件数が増えた場合にエラク面倒なことになります。私なら耐えられるのはせいぜい一桁件数までかなw

地図の表示を複数のブログ記事に掲載しながらも、手間はかけたくない場合

先に挙げた方法だと、地図の枚数が多いときは面倒くさくて死んじゃいますね。
Google Maps API のサンプル引き写しの場合、問題になるのは地図の表記先を id で示していること。class じゃなく id でやってるってことは1画面に1個しかおけないってこった。ただ、現実問題として1画面に複数の地図を置くのは、描画完了までの時間が掛かりすぎて見る人に優しくないのは確か。

もう1点は onload で描画開始してること。これも複数毎の地図の描画では工夫が必要になるし、Google Maps 以外に別途 onload の処理がある場合は一緒に走るように調整しなけりゃならない。

それでは、解決方法を…
まず1画面に1地図以内という原則を貫くには、記事の追記部分に地図描画をいれればいい。追記部分を JavaScript で折りたたむという手法が小粋空間さんやFC2ブログテンプレート工房さんで行われているが、今回のケースでは採用したらアウト。

それから onload で複数の処理を行うテクニックについても、小粋空間さんの Lightbox設置の記事において言及されている方法で簡単にクリアできる。今回は手抜きの最たるもので、body 内の後ろのほうで関数を呼び出すという方法でも誤魔化せると思うが、タイミングでうまくいかない場合もある。

それから褒められた方法ではないけれど、記事本体に JavaScript も埋め込んでしまう。サンプルコードでは位置情報などのパラメータを関数内で直書きしてるので、それを直すの面倒だから。

記事に直接JavaScriptを書く関係上、自動改行が邪魔くさいので、記事編集時に「記事の設定」でテキストフォーマットを「HTMLタグのみ」で記述するようにしてます。

それで、記事の追記中の実際のコードはこんな感じです。

そして、onloadの代替処理として、テンプレートHTML終端部分を以下のように加工します。

あなた自身の Google Maps API Key を埋め込むこと。 GLatLng に緯度、経度情報を渡すこと、マーカーに表示する文字列を渡すこと。 そのへんは直さないとです。
実際に使うときは、コード埋め込みの雛形として草稿のままで記事を残しておいて、ホントに地図を載せる記事に適宜コピペして使うのが便利かなと思います。
Yahoo!地図情報のスクリプトをロードしてると、JavaScript のどこかで名前がぶつかってうまく表示できない場合があるかと思います。 そこは、手抜きということで… 次回以降に。

[関連記事]

[ 2007/06/23 17:05 ] blog | TB(0) | CM(0)   ブックマークに追加する
コメントの投稿













管理者にだけ表示を許可する
Profile

ウニモグ

Author:ウニモグ
About - このブログについて
Credits - 利用素材などの記載
Contact - フォームによるお問合せ

Recent comments
Monthly Archives
ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。