> 記事 > ウェブ制作 プログラミング マメ知識 > 埋め込みGoogle Mapsの左上の白い枠を消す方法

埋め込みGoogle Mapsの左上の白い枠を消す方法

2014.10.02.(Thu)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

最近暑い日が多くなってきたパースです。
これからが夏本番です。

◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

Sponsored Link

Google Mapsの左上の白い枠を消す方法


本日のテーマはGoogle Mapsです。
Google Mapsは、2005年あたりにリリースされたのですが、それまでに使われていた地図とは違い、画面を左右にスクロールできるところが画期的でした。これはAJAXというjavascriptでサーバーと非同期通信をする技術を使っているのですが、この時期からウェブ技術が急成長はすさまじいものがあります。

GoogleMapsも多くの機能が追加され、現在はバージョン3までリリースされています。

さて、その最新のGoolgleMapsで表示した地図を、ブログなどに埋め込もうとをすると、左上に検索した住所と「Googleマップで見る」というリンク、「ルート」「保存」などが表示される白い枠が出てきてしまいます。ある程度大きい地図なら、これでもよいのですが、



小さい地図だと、結構圧迫感があります。



これを消す方法はないかといろいろ調べてみました。
最初に、これがなんと言う名前なのかで苦労しました。「情報ウィンドウ」「吹き出し(これは旧バージョン)」「info window」など、いろいろな表現をされています。

例えば、有名なLIGのサイトでも紹介されています。
googlemapを埋め込んだ時に出てくる吹き出しを消す方法まとめ | 株式会社LIG
ただし、これは、GoogleMaps Ver2.0で有効な方法で、現在の埋め込みマップには対応していません。

このLIGのサイト以外でも
「コピペしたコードのoutput=embedの後ろに「&iwloc=B」を付け加える」
という記事はかなりの数見かけたのですが、これではいくらやっても上手くいきません。

そこで、海外サイトを探してみたところ、以下のサイトを見つけました。
iframe – Google Maps Embed – Remove Place Card – Stack Overflow

このサイトでは、あの白い部分は「Place Card」と表現していますね。
この方法でやってみたところ、以下のように上手くいきました。
実際のコードはこのような感じになります。(横に長いので注意してください)
サイズがこれでよい場合には、下記コードの「204/37 Barract ST,perth WA」部分を任意の住所に変えれば、白いウインドウが表示されない埋め込みGoogleMapsが作成できると思います。

<div style="width: 100%; overflow: hidden; height:250px; width:250px;">
  <iframe src="http://maps.google.co.jp/maps?q=204/37 Barract ST,perth WA&z=15&output=embed" width="100%" height="600" frameborder="0" style="border:0; margin-top: -150px;">
  </iframe>
</div>

実際のところは下図のように、Map自体はある程度の大きさで作成しておいて、その真ん中部分だけを表示しているような印象です。

googlemaps
何かのお役に立てれば幸いです。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
  • facebook
  • twitter