HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

所要時間1分!グーグルマップ埋め込み時に吹き出しを削除する方法

グーグルマップを埋め込むときに、デザイン的に吹き出しが邪魔になることがありませんか。でも、吹き出しは、コードを少し改変するだけで、あっという間に消えます。

普通に貼り付けると…

グーグルマップのリンクアイコンをクリックすると、以下のうようなコードが生成されます。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?hl=ja&amp;safe=off&amp;q=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85%EF%BC%88%E4%B8%89%E9%87%8D%EF%BC%89&amp;gl=jp&amp;t=m&amp;z=13&amp;brcurrent=3,0x600155c6088f3519:0xe9a4f662c07ad725,0&amp;ll=34.789043,136.123585&amp;output=embed"></iframe>
<br />
<small>
<a href="http://maps.google.co.jp/maps?hl=ja&amp;safe=off&amp;q=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85%EF%BC%88%E4%B8%89%E9%87%8D%EF%BC%89&amp;gl=jp&amp;t=m&amp;z=13&amp;brcurrent=3,0x600155c6088f3519:0xe9a4f662c07ad725,0&amp;ll=34.789043,136.123585&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a>
</small>

これを貼り付けると以下のような地図になり、吹き出しがちょん切れて、デザイン的には相当アレなページが出来てしまいます。

大きな地図で見る

吹き出し削除は簡単

この邪魔な吹き出しを排除するのはとても簡単です。上のコードの中から、

&amp;output=embed">
</iframe>

という部分を見つけて、

&amp;output=embed&amp;iwloc=B">
</iframe>

に置き換えるだけです。

これで吹き出しが見事に取れます。

実際に改変したコード

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?hl=ja&amp;safe=off&amp;q=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85%EF%BC%88%E4%B8%89%E9%87%8D%EF%BC%89&amp;gl=jp&amp;t=m&amp;z=13&amp;brcurrent=3,0x600155c6088f3519:0xe9a4f662c07ad725,0&amp;ll=34.789043,136.123585&amp;output=embed&amp;iwloc=B"></iframe><br /><small><a href="http://maps.google.co.jp/maps?hl=ja&amp;safe=off&amp;q=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E4%BC%8A%E8%B3%80%E4%B8%8A%E9%87%8E%E9%A7%85%EF%BC%88%E4%B8%89%E9%87%8D%EF%BC%89&amp;gl=jp&amp;t=m&amp;z=13&amp;brcurrent=3,0x600155c6088f3519:0xe9a4f662c07ad725,0&amp;ll=34.789043,136.123585&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

吹き出しが取れた地図

大きな地図で見る


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: