スポンサーサイト 

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



[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

【解決】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宣言を先頭にしない、でうまくいく様子。








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 [ 編集 ]
コメントの投稿














管理者にだけ表示を許可する
プロフィール

あとねっくす

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



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