【解決】Google Mapsの吹き出しが正しく表示できない

「Google Mapsの
　吹き出しが正しく表示できない」

Google Maps APIを触ってみてるんですが、吹き出しがうまく表示されません。

(表示自体はできるし、きちんと動作もします。細かいところなので、気にしなければ良いのですが、どうしても気になるので。)

いろいろネットで調べてみたのですが、解決策がわからず。
とりあえず、問題だけでも以下にメモしておきます。

分かる方がおりましたら、教えてください。お願いします。

2007年7月31日
chika3さんから解決方法を教えていただき、
問題のGoogleMapの吹き出しが綺麗に表示されるようになりました。
この記事の最後のところに■解決方法■として追記いたしました。
chika3さん、どうもありがとうございました。

---

■問題の詳細

私のPCの環境(ブラウザ、ネット環境など)の影響で、表示がおかしいだけという可能性もありますが、以下にいくつかキャプチャした画像例を挙げてみます。

(本当は、自分の作成したものをキャプチャするのが良いのですが、ソースの解説などが載っているサイトを参考にすれば、ソースなどから比較もできると思い、以下のように他サイトさんをキャプチャさせていただきました。)

●まず、吹き出しが正しく表示できない例を2つ挙げます。
(あくまで私のPCでそう見えるので、他の方のPCで同じように見えるかは分かりません。)



サンプル：http://satoshi.blogs.com/raw/GoogleAPI-J2.html
元の記事：Google Map で遊ぶ（２）：東京観光案内(Life is beautiful)




サンプル：http://www.cybergarden.net/blog/images2/google_maps7.html
元の記事：Google Maps API解説(CYBER@GARDEN)

上記2つの画像を見ていただくと分かると思いますが、
(少なくとも私のPCでは)Google Mapsの吹き出し内の上側と左側に線が入っています。


●次に、吹き出しが綺麗に表示される例を2つ挙げます。



サンプル：http://googlemaps.googlermania.com/map_2-3.html
元の記事Google Maps 活用講座｜ホームページに地図サービス




サンプル＆記事：Google MAPS APIプログラミング > ふきだしを表示する(Geekなぺーじ)

---

■調べてみましたが・・・

上記の4つのサイトのソースと解説（＆自分の書いたソース）を読み比べたのですが、どうにも違いがわからず、吹き出しが綺麗に表示される場合とそうでない場合の区別がつきませんでした。

インターネットで情報を探してみましたが、それと言った情報もなく・・・。

[考えられること]
・ブラウザやPC環境によって表示が変わるものなのかどうか？
　⇒このような問題に当たっているのは、自分だけ？
・Google Maps APIのバグなのか？
　⇒APIのアップデート待ちになるのか？
・ソースの書き方・APIの使い方で解決できるものなのか？
　⇒ここが本当に知りたいところです。

何か知っている方・同じ問題にぶつかっている方がいれば、
教えていただければと思います。どうぞよろしくお願いいたします。

---

■解決方法■

> [chika3さんのコメントより]
> htmlコードの冒頭でXML宣言があると上記現象になるようです。
> <?xml version="1.0" encoding="euc-jp"?>
> があるとNGです。取ってみてください。

とのことで、htmlコード内のXML宣言を削除してみたところ、
問題のGoogleMap吹き出しが綺麗に表示されるようになりました。

上記で、比較のために紹介させていただいたサイトのGoogleMapも、
XML宣言の有無の違いのようです。

無事に問題が解決できて良かったです。

---

■関連リンク

・[はてな]「GoogleMapsEditorというツールを使って地図を製作しましたが」
　　http://q.hatena.ne.jp/1187755427
　　　⇒どうやら、IE系で起きる問題で、Firefox,Netscapeでは起きないようです。
　　　⇒DOCTYPE宣言を先頭にする＆XML宣言を先頭にしない、でうまくいく様子。

---

Google Maps APIv2活用リファレンス

posted with amazlet on 07.07.14

アイティティ
技術評論社 (2007/02/09)
売り上げランキング: 54826

Amazon.co.jp で詳細を見る

Google Maps API逆引きクイックリファレンス―WEB2.0対応

posted with amazlet on 07.07.14

古籏 一浩
毎日コミュニケーションズ (2006/09)
売り上げランキング: 46923

おすすめ度の平均:

ようやく出ました。使えるGoogleMapsリファレンス。

Amazon.co.jp で詳細を見る