Google マップの埋め込み HTML でふきだしを消す方法(新)

Google マップの埋め込み HTML でふきだしを消す方法(新)

Posted at January 7,2009 12:37 AM
Tag:[GoogleMaps]

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

ふきだしを消して、マーカーを残したい場合は「Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法」を参照してください。

1.問題点

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

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

実は、以前「Google マップの埋め込み HTML でふきだしを消す方法」をエントリーしたのですが「その方法ではふきだしが消えませんでした」というコメントを頂きました。

どうやら前回のエントリーからしばらく経ったこともあり、その間に Google マップの UI が変更されたようです。ということで、新しい技を紹介します。

2.解消方法

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

Google マップ検索結果

表示結果の中央地点にある赤色のマーカーを右クリックして「ここからのルート」を選択します。

検索結果をクリア

表示結果の中央地点にある赤色のマーカーが緑色になるので、これをさらに右クリックして、「この地点を削除」を選択します。

検索結果をクリア

これで余分なパーツはすべて消えました。この状態で、右上にある「このページのリンク」をクリックします。

非表示になった状態

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

HTMLコードを取得

取得したHTMLコードをご自身のブログに貼り付ければ、ふきだしは表示されなくなります。

HTMLコードを取得

検索で複数のマーカーが表示された場合も、任意のマーカーを右クリックして「ここからのルート」を選択し、緑色になったマーカーを右クリックして「この地点を削除」を選択すれば、同じように消すことができます。

ふき出し以外のマークも消去可能

以上です。

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

関連記事
zenback
人気エントリー
トラックバックURL


コメント

サイトに埋め込んだマップの吹き出しを消す方法を検索して、たどり着きました。
この方法では赤色のマーカーも消えてしまいますが、もしご存じてあればマーカーは残して吹き出しのみ消す方法を教えていただけないでしようか?

例えば、↓このように表示する方法です。
http://30min.jp/place/295673

[1] Posted by BBQ : September 11, 2009 9:10 AM

>BBQさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件について、エントリー致しましたのでご確認ください。
http://www.koikikukan.com/archives/2009/09/20-025555.php
それではよろしくお願い致します。

[2] Posted by yujiro logo : September 20, 2009 3:46 AM

googleマップはどこから手に入れるか

[3] Posted by shutennyoku : October 13, 2009 11:13 AM

>shutennyokuさん
こんばんは。
ご質問の件ですが、Googleマップはブラウザで以下のURLにアクセスするだけです。

http://maps.google.co.jp/

表示されたら、検索フィールドに「東京駅」といれてみてください。この記事の最初の地図が表示されます。
それではよろしくお願い致します。

[4] Posted by yujiro logo : October 14, 2009 7:04 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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