Google Maps 攻略!!
ちょっと苦戦しましたがブログに Google Maps を実装。いったんできちゃえば後は楽。こら便利です。
なかなか暇がなくてブログ作りが全然進展してなかったんですがこれで完成のメドがたちました。この 2 月中に完成すると思われます。ところで注意しなくちゃいけないのは Firefox で問題がなくても Internet Explorer で Google Maps が描画されないことがあること。特に折れ線 (Polyline)。
Google Map は表示されても折れ線だけ表示されないなんてことがあります。Polyline を Internet Explorer できちんと表示させるためには 3 つのことに気をつける必要があります。
まず、第 1 に Polyline で指定する最後の座標は後ろにカンマをつけちゃいけないってこと。
悪い例
var polyline = new GPolyline([
new GLatLng(37.467637,139.962730),
new GLatLng(37.334644,139.854069),
], "#ff0000", 2, 0.5);
var polyline = new GPolyline([
new GLatLng(37.467637,139.962730),
new GLatLng(37.334644,139.854069)
], "#ff0000", 2, 0.5);
第 2 に Google Maps API ドキュメント にも書いてあるように VML ネームスペース宣言をする必要があります。
第 3 にスタイルシートに
v\:* {behavior:url(#default#VML);}
と書く必要があります。 スタイルシートを使ってない場合はヘッドでスタイル指定します。
それからポリラインとは関係ないんですが、場合によっては JavaScript で function を実行するために body タグで onload 指定しなくてはいけないかもしれません。テストページでは必要なかったんですがエントリーに Google Maps を埋め込むと、IE では読込途中にエラーになってしまいました。
... を開けません。操作は中断されました。
とか言われてページ自体が表示されなくなってしまった。
エントリーのテンプレートを
<body onload="load();individualArchivesOnLoad(commenter_name)" onunload="GUnload()">
と記述したら直りました。元々 individual なんたらが onload 指定されてるのでそれとコロンでつなぐのが大事ですね。 onload を複数指定する場合には各々をコロンでつなぐ必要があります。これでこれからは記事を Movable Type に投稿するときに javascript の記述をするだけです。一旦、テンプレートを作っとけば楽です。
ポリラインでは座標の入力がとても面倒ですが 「月と六ペソ」さんのサイト で座標を算出すると非常に楽です。月と六ペソさんありがとうございます。
追記 現在は「月と六ペソ」ではなく「Seis Pesos」というサイトに移行されたようです。
以下、手順
- 座標をコピったらテキストエディタに貼り付け。
- 半角スペースをタブに変換
- そいつをエクセルに貼り付け
- new GLatLng( というセルと , というセルと ), というセルを作る
- そいつらをビヨーンと下に伸ばす
- 間にさっきの座標を入れる
- 全体をコピー
- テキストエディタに貼り付け
- Tab を消去
- 完成!
あと一番重要なのは Movable Type の改行設定を [なし] にしておくこと。これを怠ると Internet Explorer はおろか Firefox でも表示されなくなります。
なんというか Internet Explorer は敏感すぎますね。Firefox のような冗長性を見習ってもらいたいものです。つーか IE で Google Maps を見ると重すぎます。
追記
現在はこの記事を書いたときとはやり方を変えています。この時はスクリプトを全て記事内に書いていましたが、今はスクリプトを外部に用意して記事内で呼び出しています。そのため、onload 指定は body 要素内ではなくスクリプト内に記載しています。
また、第 2 番目の VML ネームスペース宣言もしていませんし、第 3 番目の記載もしていません。詳細については当ブログの 「PHP 内 JavaScript で Googlemaps を表示する」 の記事を参照してください。
さらにエクセルも使う必要はありません。秀丸などのテキストエディタで正規表現を使って置換すれば一発だと思います。
このときは正規表現を知らなかったのでしょう。
そして、現在は Movable Type ではなく、WordPress に移行しています。
関連記事
. Designed by myself. Animated by コースヶ.
トラックバック
URL:
コメント
この記事のコメントフィード
コメント投稿