ホームページにアクセス情報として、会社やお店を中心としたGoogleマップを表示させるためのやり方、注意点をお伝えします。

Googleマップをホームページに埋め込む手順

１）ホームページでGoogleマップを表示するためのhtmlコードを取得する

• ①パソコンでGoogleマップにアクセスして住所検索をします
• ②表示された地図の画面左側にある情報パネルのなかにある「共有ボタン」をクリック
• ③表示された「共有」ダイアログのなかの「地図を埋め込む」をクリック
• ④「HTMLをコピー」をクリック

以上の操作で、Googleマップをホームページに埋め込むためのhtmlコードを取得できました。

※その住所を中心とした地図となっているかの確認をしましょう。

２）任意のページに取得したhtmlコードを貼り付ける

• ⑤アクセス情報のページなど任意のページのhtmlファイルを開く
• ⑥コピーしておいたGoogleマップのhtmlコードを任意の場所に貼り付ける

以上です。

Googleマップを埋め込むときの注意事項

html編集モードでおこなうこと

ホームページ制作ソフトによっては「html編集モード」というhtmlタグを書きながら編集していくモード（htmlタグはみえる）と、「ワープロ感覚で操作できるモード（htmlタグはみえない）」とわかれている場合があります。

コピーしておいたGoogleマップのhtmlコードを貼り付けるのは「html編集モード」でおこなう必要があります。

スマホで地図がはみ出さないように調整

コピーしたGoogleマップ表示用のhtmlコードをそのまま貼り付けただけではパソコンで見る時は問題ないのですが、スマホでみると地図の横幅が大きすぎて画面からはみ出してしまう可能性があります。

そのため、そのまま貼り付けるのではなく、貼り付けたあとにその一部を書き換えて調整する必要があります。

htmlコードのうち、「width="600"」というwidth属性を「width="100%"」と書き換えておきましょう。このように修正することでスマホで見たときも横幅がはみ出ること無くきれいに表示されます(^^)

参考になれば幸いです。