Googleマップの埋め込みでふきだしを消す
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&source=s_q&hl=ja&geocode=&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&sll=35.630791,139.736137&sspn=0.191985,0.312767&brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&ttype=dep&date=10%2F11%2F25&time=15:06&noexp=0&noal=0&sort=time&ie=UTF8&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&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&start=0&cid=18203925754557583694&ll=35.632396,139.881706&spn=0.020928,0.025835&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&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&sll=35.630791,139.736137&sspn=0.191985,0.312767&brcurrent=3,0x60187d1047835c47:0x89620b95c4d7f418,0&ttype=dep&date=10%2F11%2F25&time=15:06&noexp=0&noal=0&sort=time&ie=UTF8&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&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&start=0&cid=18203925754557583694&ll=35.632396,139.881706&spn=0.020928,0.025835&z=14&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>
そのままのコードを埋め込むと、下の例のように吹き出しがついてきてしまいます。
ここで、iframeタグのsrcのURLの中にある「iwloc=A」の部分を「iwloc=B」に変えます。iwlocがない場合にはパラメータに「&iwloc=B」を付加します。誤って「大きな地図を見る」のaタグを編集しても改善されないので気をつけましょう。
そうすると下のように吹き出しが表示されません。
マーカーをクリックすれば、吹き出しは表示されます。