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

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


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

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

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

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

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




■問題の詳細

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

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

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

Life is beautiful

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


CYBER@GARDEN

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

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


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

Google Maps 活用講座|ホームページに地図サービス

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


Geekなぺーじ

サンプル&記事: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活用リファレンス
アイティティ
技術評論社 (2007/02/09)
売り上げランキング: 54826




Google Maps API逆引きクイックリファレンス―WEB2.0対応
古籏 一浩
毎日コミュニケーションズ (2006/09)
売り上げランキング: 46923
おすすめ度の平均: 5.0
5 ようやく出ました。使えるGoogleMapsリファレンス。




chika3さん、
どうもありがとうございます!

chika3さんのおっしゃるように、私の作成したもので、XML宣言( <?xml...?>) をはずしたところ、GoogleMapの吹き出しが綺麗に表示されるようになりました!

ブログ内で紹介したサイト4つの違いもXML宣言の有無ですね。

ブログ記事内にも解決方法として説明を追加させていただきます。

本当に助かりました!ありがとうございます!
[ 2007/07/31 23:27 ] あとねっくす [ 編集 ]
解決しているかどうか分かりませんが、htmlコードの冒頭でXML宣言があると上記現象になるようです。

<?xml version="1.0" encoding="euc-jp"?>

があるとNGです。取ってみてください。
[ 2007/07/31 16:30 ] chika3 [ 編集 ]
コメントの投稿














管理者にだけ表示を許可する
となりの801ちゃん(1)
ブログ内検索
プロフィール

あとねっくす

Author:あとねっくす
[メールアドレス]
atnexblogあっとまーくgmail.com

さいきんのおすすめ

ムゲンプチプチ ぷち萌え ツンデレ編
ムゲンプチプチ ぷち萌え ツンデレ編【Amazon】 【楽天】


日常 2 (2) (角川コミックス・エース 181-2)
日常 2 (2) (角川コミックス・エース 181-2)【Amazon】 【楽天】
月刊少年エースで連載されているマンガです。エヴァTシャツ付録のときに買った少年エースで「日常」を読んで、盛大に吹いてしまいました。その後、気になって、コミック1,2巻とも読みましたが、これはヤバイです。面白いので、みなさんもぜひどうぞ。


Darling(初回限定盤)
Darling(初回限定盤)【Amazon】 【楽天】

勇者のくせになまいきだ。
勇者のくせになまいきだ。【Amazon】 【楽天】 不覚にもハマってます。お手軽にできるゲームなので、ゲームボーイのテトリスと同じ感覚(って言って分かる人いますかね?)で気軽にプレイできるのですが、その気軽さが命取りで、「もう1回、あともう1回」という感じで気づいたら、数時間プレイしているという・・・。正直、面白いです。気が付いたら、PSPのバッテリーが切れました・・・。家でプレイしているのに、アダプタ付けてなかった。

腐女子の品格
腐女子の品格【Amazon】 【楽天】

みんなのPython Webアプリ編 [みんなのシリーズ]
みんなのPython Webアプリ編 [みんなのシリーズ]【Amazon】 【楽天】
前作、みんなのPythonはPythonでプログラムするときは、常に手元にあります。気づけば、いろいろ書いてあって、たまに読んでも気づきが多い本です。そのWebアプリ編ということで期待度が高いです。wktk。(ただいま少しずつ読書中。)

みんなのPython
みんなのPython【Amazon】 【楽天】
私はこれでPythonをはじめました。

ドラマCD「エル・カザド」第2巻
ドラマCD「エル・カザド」第2巻【Amazon】 【楽天】