小粋空間  -  a cheap joke and a play on words site

Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法

Google マップをブログなどに埋め込むときの HTMLコードに含まれるふきだしだけを消し、マーカーを残す方法です。

１．問題点

Google マップから検索などで特定の地域を表示させて、HTMLコードを取得して、ブログに埋め込むと、検索したときの情報がふきだしとして含まれてしまいます（下）。

「Google マップの埋め込み HTML でふきだしを消す方法（新）」では、ふきだしとマーカーを消す方法を紹介しましたが、「ふきだしを消してマーカーは残したい」というご質問を頂きましたので、本エントリーにて紹介致します。

なお、この方法は適正な方法であるかどうかは定かでありません。また、全てのブラウザで期待通りの結果になるかどうかも不明です（Firefox 3 では確認しました）。

２．解消方法

Google マップで検索結果が表示されます。ここでは「東京駅」で検索した結果を表示しています。

噴出しの×印をクリックして、ふきだしを消します。

この状態で、右上にある「このページのリンク」をクリックします。

HTMLコード（反転部分）を取得します。

取得したHTMLコードに「&iwloc=B」を追加します（青色部分）。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=%E6%9D%B1%E4%BA%AC%E9%A7%85&amp;sll=35.681248,139.766521&amp;sspn=0.018684,0.020213&amp;date=09%2F09%2F20&amp;time=03:03&amp;ttype=dep&amp;noexp=0&amp;noal=0&amp;sort=time&amp;tline=&amp;ie=UTF8&amp;ll=35.6893,139.770298&amp;spn=0.033881,0.040426&amp;z=14&amp;start=0&amp;output=embed&amp;iwloc=B"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=%E6%9D%B1%E4%BA%AC%E9%A7%85&amp;sll=35.681248,139.766521&amp;sspn=0.018684,0.020213&amp;date=09%2F09%2F20&amp;time=03:03&amp;ttype=dep&amp;noexp=0&amp;noal=0&amp;sort=time&amp;tline=&amp;ie=UTF8&amp;ll=35.6893,139.770298&amp;spn=0.033881,0.040426&amp;z=14&amp;start=0" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

取得したHTMLコードをご自身のブログに貼り付ければ、ふきだしは表示されなくなります。マーカーの表示位置はコードを取得する前に、地図をドラッグして適宜補正してください。

以上です。

余談ですが、埋め込みHTMLのマークアップを object 要素に変更したい方は「Google マップの貼り付け用 HTML を valid にする」スクリプトをご利用ください。

参考：Google Map Parameters