スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Googleマップをサイトに埋め込む事が多々ありますが、デザイン、レイアウトの都合上、マップのエリアが狭い場合に、吹き出しが邪魔な時があります。どうにかして吹き出しを消したい。

以前からこの件については調べていたのですが、「できる」と紹介されているサイトを真似てみてもできなかったり。ルート検索にする、マーカーごと消すなど、一部妥協を強いられる策しかありませんでした。
しかし、今回、決定的は方法を見つけたのでメモとして残しておきます。

通常、Googleマップのサイトより任意の場所を検索し、メニューの「リンク」から「埋め込み地図のカスタマイズとプレビュー」をクリックします。そこでコードを取得し貼り付けることで、自サイトにGoogleマップを表示させることができます。

以下は東京ディズニーランドのコードを貼り付けた例です。

<iframe width="300" height="300" 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%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;sll=35.630791,139.736137&amp;sspn=0.191985,0.312767&amp;brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&amp;ttype=dep&amp;date=10%2F11%2F25&amp;time=15:06&amp;noexp=0&amp;noal=0&amp;sort=time&amp;ie=UTF8&amp;hq=%E6%9D%B1%E4%BA%AC%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;hnear=%E6%9D%B1%E4%BA%AC%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;start=0&amp;cid=18203925754557583694&amp;ll=35.632396,139.881706&amp;spn=0.020928,0.025835&amp;z=14&amp;iwloc=A&amp;output=embed"></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%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;sll=35.630791,139.736137&amp;sspn=0.191985,0.312767&amp;brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&amp;ttype=dep&amp;date=10%2F11%2F25&amp;time=15:06&amp;noexp=0&amp;noal=0&amp;sort=time&amp;ie=UTF8&amp;hq=%E6%9D%B1%E4%BA%AC%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;hnear=%E6%9D%B1%E4%BA%AC%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89&amp;start=0&amp;cid=18203925754557583694&amp;ll=35.632396,139.881706&amp;spn=0.020928,0.025835&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

そのままのコードを埋め込むと、下の例のように吹き出しがついてきてしまいます。


大きな地図で見る

ここで、iframeタグのsrcのURLの中にある「iwloc=A」の部分を「iwloc=B」に変えます。iwlocがない場合にはパラメータに「&amp;iwloc=B」を付加します。誤って「大きな地図を見る」のaタグを編集しても改善されないので気をつけましょう。

そうすると下のように吹き出しが表示されません。


大きな地図で見る

マーカーをクリックすれば、吹き出しは表示されます。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search