Google Maps APIで吹き出しの中に画像を表示する際のミス

　ＨＰを作成していたときの話。

　Google Maps APIを用いて、会場案内の地図を作成していた。その際、会場となる場所にマーカーを立てるようにした。ここまでは経験済み。

　さて、新たな試み（自分にとって新たなという意味）として、


マーカーをクリックするとその吹き出しの中に画像を表示する

という機能を追加することにした。これも良く知られていることで、ネットで検索すればそれについての解説ページは山ほどひっかかる。一瞬で終わると思っていたのだが。。。。

　どういうわけか、画像が表示されない。ＨＴＭＬのタグが表示されてしまう。何故だ？
以下、原因を簡単に述べる。

　マーカをクリックしたら吹き出しの中にＨＴＭＬで記述された内容を表示する命令は以下のもの。

GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml(html); });

ここで、htmlの内容は用意してあるxmlファイルから読み出している。
訂正前、その内容は以下のようなものだった。

<marker lat="緯度" lng="経度" html="<center>< img src="./picture.jpg"></center >" label="ラベルの内容"/>

まず、この時点で、＜や＞を実体文字参照に変えなければならないということを忘れていた。
また、画像ファイルを指定するところでは、画像ファイル名をダブルクォーテーションではなく、シングルクォーテーションで囲うようにすることが必要だった。


これでうまくいくと思ったのだが、それでも駄目。この原因を見つけるのに苦労した。その原因とは、

「<の実体名（＆lt;）」とimgの間に半角スペースが入っていたこと

だった。つまり、
「＆lt; img」を「＆lt;img」とすべき（＆は本来半角）
だったのだ。これが原因で吹き出しに、タグしか表示されなかったのです。これには参りました。

完成品は以下のようなもの。この場合、吹き出しをクリックするとラーメンの画像が表示されます。