ホームページ内に簡単に地図を設置

小川さん
聞いてくれ、 カンマンからのお知らせだ。

お店や企業のホームページには必ずある案内(アクセス)ページ。
やっぱり地図はほしいですよね。
でも手書きで地図を描くには大変だし、わかりにくいこともあります。

そこでお世話になるのはGooglマップさん。
拡大縮小表示が簡単で、付近の情報や自宅からのルートも教えてくれます。
そのGooglマップはホームページ内にぱぱっと手軽に埋め込むことが可能です。
以前はAPIを取得する必要がありましたが、現在はGoogleが提供するソースをサイトに貼り付ければOKです。

【貼り付け方】
Googleの[地図]ページの検索窓へ住所を入力します。
その下の「リンク」ボタンをクリックします。

ホームページのアクセスページなどに挿入する場合は、
[ウェブサイトへの地図埋め込み用 HTML コード]の方のコードをhtml内に貼り付けます。

表示サイズを変えたければ、width(横幅)、height(高さ)を変更します。

ううん、めちゃ簡単。

と、ここでひとつ難点が。

デフォルトだとマーカーの上に吹き出しが出た状態になってしまいます。
地図が小さいとかなり邪魔。


大きな地図で見る

で、今回は、Googleマップの吹き出しを消す方法をば。

先ほどの[ウェブサイトへの地図埋め込み用 HTML コード]を見てください。
iframeで埋め込まれますが、

<iframe src="~&amp;output=embed">

のところ!
末尾に

&amp;iwloc=B

を追加してください。

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


大きな地図で見る

これで吹き出しが消えました。すっきり。よかったよかった。

カンマン最新情報をゲット!

Facebookのウォールで

Twitterのタイムラインで

この記事を書いた人

comman
comman 社を背負った存在 あるときはディレクター、あるときはエンジニア、そしてデザイナにも、夜寝ているときだけ現れる、妖精さん的アカウントです。 commanが書いた他の記事をチェック!

もう1記事どうぞ!

  • 関連
  • 人気
  • 最新

コメントを残す