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

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

Posted at September 20,2009 2:55 AM
Tag:[GoogleMaps]

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

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

1.問題点

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

HTMLコードをブログに貼り付け

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

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

2.解消方法

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

Google マップ検索結果

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

ふきだしをクリア

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

非表示になった状態

HTMLコード(反転部分)を取得します。

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

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

以上です。

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

参考:Google Map Parameters

関連記事
トラックバックURL


トラックバック

[WEB制作]Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法 from 名古屋のWebシステム屋さん
Googleマップは便利でサイトにもよく掲載しますが、Googleマップが生成するリンクはデフォルトで噴出しが表示されてしまうので、これを非表示にできな... [続きを読む]

Tracked on December 22, 2009 12:43 PM

Google マップの埋め込み HTML でふきだしを消す方法 from IT化をサポートします
クライアント様からGoogle マップのふきだしを消す方法を尋ねられた。 そこでググってみるとエントリーを発見 Google マップの埋め込み HTM... [続きを読む]

Tracked on July 22, 2010 11:34 AM

Googleマップの埋め込みでふきだしを消す from helog - Webに悩む人のネタ帳
Googleマップをサイトに埋め込む事が多々ありますが、デザイン、レイアウトの都合上、マップのエリアが狭い場合に、吹き出しが邪魔な時があります。どうにかし... [続きを読む]

Tracked on December 6, 2010 10:03 AM
コメント

いつも有益な情報参考にさせていただいてます。
このエントリーもとても役に立ちました。
うまくふきだしを消すことができました。
ありがとうございます!

[1] Posted by 心酔 : April 28, 2010 9:56 AM

>心酔さん
こんばんは。
ご利用ありがとうございます。
お役に立てたようで何よりです。
ではでは!

[2] Posted by yujiro logo : May 2, 2010 4:28 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)