1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. お店情報にGoogleマップを埋め込む

お店情報にGoogleマップを埋め込む

お店情報にGoogleマップを埋め込む

それではメインコンテンツの「お知らせ」と「メニュー」を制作しましたので、残りの「お店情報」を見ていきます。Googleマップの導入も簡単なのでぜひ押さえておいてください。

ひと昔前ならホームページに地図を表示するなら地図のイラストを作っていましたが、今ではGoogleマップの埋め込みが主流です。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

お店情報をHTMLで構築する

まずはHTMLのコードを記述しますのでご確認ください。マップとお店の情報を横並びにする形でデザインしていきます。

index.html

                	
    
                        
  1. <section id="shop">
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     <div class="title">
    4. 
                        
  4.       <h2>お店情報</h2>
    5. 
                        
  5.     </div>
    6. 
                        
  6.     <div class="shopWrap">
    7. 
                        
  7.       <div class="map">
    8. 
                        
  8.         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52430.6695921149!2d135.4922664590351!3d34.782868520671215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e4a6bda73c45%3A0x527cc777508a7d95!2z5aSn6Ziq5bqc5ZC555Sw5biC!5e0!3m2!1sja!2sjp!4v1630053102538!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    9. 
                        
  9.       </div>
    10. 
                        
  10.       <div class="shopInfo">
    11. 
                        
  11.         <dl>
    12. 
                        
  12.           <dt>店舗名</dt>
    13. 
                        
  13.           <dd>いやしのカレー サンプル</dd>
    14. 
                        
  14.         </dl>
    15. 
                        
  15.         <dl>
    16. 
                        
  16.           <dt>所在地</dt>
    17. 
                        
  17.           <dd>大阪府吹田市○○</dd>
    18. 
                        
  18.         </dl>
    19. 
                        
  19.         <dl>
    20. 
                        
  20.           <dt>TEL</dt>
    21. 
                        
  21.           <dd>06-○○○○-○○○○</dd>
    22. 
                        
  22.         </dl>
    23. 
                        
  23.         <dl>
    24. 
                        
  24.           <dt>営業時間</dt>
    25. 
                        
  25.           <dd>10：00 ～ 23:00<br>※ラストオーダー : 22:00</dd>
    26. 
                        
  26.         </dl>
    27. 
                        
  27.         <dl>
    28. 
                        
  28.           <dt>店休日</dt>
    29. 
                        
  29.           <dd>水曜日</dd>
    30. 
                        
  30.         </dl>
    31. 
                        
  31.       </div>
    32. 
                        
  32.     </div>
    33. 
                        
  33.   </div>
    34. 
                        
  34. </section>
    35.

タグを見てもらうとわかりますが、Googleマップは「iframe」タグの部分となります。マップを埋め込むHTMLタグはこれだけでOKです！

このコードの取得方法は次の「Googleマップの埋め込みと設定」でお話ししますので、ここではこのタグを貼り付けるだけでGoogleマップが埋め込めるようになるって事だけ理解しておいてください。

「お店情報」にもページ内リンクを設定しますのでsectionタグに「shop」のid名を付けています。今までの工程で「id」と「class」を付けてきましたが、簡単に違いを書いておきます。

1ページにひとつだけ指定できるのが「id」、1ページに複数指定できるのが「class」です。

例えばデモサイトでは「inner」というクラス名のdivをヘッダーやフッター、そしてこの「お店情報」の中など複数箇所で指定しています。

ですが「news」「menu」「shop」などのid名はそれぞれ1箇所にしか使用していません。このように同じid名は複数箇所で使用してはいけないというルールがあります。

まぁ、使い分けがイマイチわからないという方はすべて「class」で指定してもらっても構いません。ただし、ページ内リンクを設定できるのは「id」のみです。

こちらも見てください

Googleマップの埋め込みと設定

ではデモサイトと同じマップをこのページのサイズに合わせて表示してみます。

このマップを表示しているのが下記のiframeタグです。

                	
    
                        
  1. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52430.6695921149!2d135.4922664590351!3d34.782868520671215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e4a6bda73c45%3A0x527cc777508a7d95!2z5aSn6Ziq5bqc5ZC555Sw5biC!5e0!3m2!1sja!2sjp!4v1630053102538!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    2.

今は「大阪府吹田市」と指定したマップなので広範囲の地図が表示されていますが、ちゃんと番地まで記述すれば指定の場所にピン付きで表示されます。

このコードを取得するのも簡単です。まずは「Google Map」のページに飛んでみてください。

そして上部にある検索ボックスに所在地を記入してその横にある虫メガネのアイコンをクリック、もしくはパソコンの「Enter」キーを押します。

これで指定の場所にピンが表示されたかと思います。次に検索ボックスの少し下の方を見ると「共有」というボタンがありますのでクリックします。すると「リンクを送信する」と「地図を埋め込む」と書かれたボックスが表示されます。

今回は埋め込みなので「地図を埋め込む」を選択して表示されるiframeタグをコピーすればOKです。この時に地図のサイズが小・中・大・カスタムサイズから選べるんですが、後で変更できるのでどれでも構いません。

Googleマップではこの他にもルート案内を記した地図の埋め込みも可能です。詳しくは「グーグルマップの埋め込み方法！ルート表示したアクセスマップも作成できる」で設定方法を紹介しています。

こちらも見てください

お店情報をCSSで調整する

あとはお店情報のデザインをCSSで整えていきましょう。

style.css

                	
    
                    	
  1. /* ------ shop ------ */
    2. 
                    	
  2. #shop {
    3. 
                    	
  3.   padding-top: 80px;
    4. 
                    	
  4.   margin-top: -80px
    5. 
                    	
  5. }
    6. 
                    	
  6. #shop .inner {
    7. 
                    	
  7.   width: 1200px;
    8. 
                    	
  8.   text-align: center;
    9. 
                    	
  9.   padding: 80px 10px;
    10. 
                    	
  10.   margin: 0 auto
    11. 
                    	
  11. }
    12. 
                    	
  12. #shop h2 {
    13. 
                    	
  13.   font-size: 2.4rem;
    14. 
                    	
  14.   letter-spacing: 0.09em
    15. 
                    	
  15. }
    16. 
                    	
  16. #shop .shopWrap {
    17. 
                    	
  17.   font-size: 0;
    18. 
                    	
  18.   margin-top: 60px
    19. 
                    	
  19. }
    20. 
                    	
  20. #shop .shopWrap .map {
    21. 
                    	
  21.   width: 820px;
    22. 
                    	
  22.   vertical-align: middle;
    23. 
                    	
  23.   display: inline-block
    24. 
                    	
  24. }
    25. 
                    	
  25. #shop .shopWrap .shopInfo {
    26. 
                    	
  26.   width: 280px;
    27. 
                    	
  27.   font-size: 1.6rem;
    28. 
                    	
  28.   letter-spacing: 0.09em;
    29. 
                    	
  29.   vertical-align: middle;
    30. 
                    	
  30.   text-align: left;
    31. 
                    	
  31.   margin-left: 60px;
    32. 
                    	
  32.   display: inline-block
    33. 
                    	
  33. }
    34. 
                    	
  34. #shop .shopWrap .shopInfo dl {
    35. 
                    	
  35.   padding: 20px 0;
    36. 
                    	
  36.   border-bottom: 1px solid #c1c1c1
    37. 
                    	
  37. }
    38. 
                    	
  38. #shop .shopWrap .shopInfo dl:first-child { border-top: 1px solid #c1c1c1 }
    39. 
                    	
  39. #shop .shopWrap .shopInfo dt {
    40. 
                    	
  40.   font-size: 1.3rem;
    41. 
                    	
  41.   letter-spacing: 0.09em;
    42. 
                    	
  42. }
    43. 
                    	
  43. #shop .shopWrap .shopInfo dd {
    44. 
                    	
  44.   font-size: 1.6rem;
    45. 
                    	
  45.   letter-spacing: 0.09em;
    46. 
                    	
  46.   margin-top: 10px
    47. 
                    	
  47. }
    48. 
                    	
  48. @media screen and (max-width: 768px) {
    49. 
                    	
  49.   #shop {
    50. 
                    	
  50.     padding-top: 60px;
    51. 
                    	
  51.     margin-top: -60px
    52. 
                    	
  52.   }
    53. 
                    	
  53.   #shop .inner {
    54. 
                    	
  54.     width: 100%;
    55. 
                    	
  55.     padding: 60px 4%;
    56. 
                    	
  56.     margin: 0 auto
    57. 
                    	
  57.   }
    58. 
                    	
  58.   #shop h2 { font-size: 2rem }
    59. 
                    	
  59.   #shop .shopWrap .map {
    60. 
                    	
  60.     width: 100%;
    61. 
                    	
  61.     display: block
    62. 
                    	
  62.   }
    63. 
                    	
  63.   #shop .shopWrap .map iframe {
    64. 
                    	
  64.     width: 100%;
    65. 
                    	
  65.     height: 400px;
    66. 
                    	
  66.   }
    67. 
                     	
  67.   #shop .shopWrap .shopInfo {
    68. 
                     	
  68.     width: 100%;
    69. 
                     	
  69.     margin-top: 60px;
    70. 
                    	
  70.     margin-left: 0;
    71. 
                    	
  71.     display: block
    72. 
                    	
  72.   }
    73. 
                    	
  73. }
    74.

サインプルサイトはレスポンシブデザインで作っているため、Googleマップにもその設定をしないといけないので注意してください。

と言っても記述はめちゃめちゃ簡単で下記の1行を追加するだけです。上記のスマホデザイン部分にもこの指定があるのでご確認ください。

                    
    
                        
  1. iframe { width: 100% }
    2.

あとは「:first-child」の指定方法について説明すると、これは「疑似クラス」というもので同じ階層の要素を指定する際に記述します。

例えばliタグを5個記述したとします。そして疑似クラスをliタグに付けた場合、「li:first-child」で指定されるのは1つ目のliタグです。「ファースト」で一番目という意味になります。

これとは反対の意味となるのが「li:last-child」で、一番後ろのliタグが指定されます。今回はliタグを5個にしましたので5つ目のliタグという事です。

もうひとつの指定方法として「li:nth-child」というのもあります。「nth-child」の場合は後ろに具体的な値を記述して「li:nth-child(1)」とすれば「li:first-child」と同じく1つ目のliタグを指定できます。

                	
    
                        
  1. <ul>
    2. 
                        
  2.   <li>「li:first-child」と「li:nth-child(1)」で指定</li>
    3. 
                        
  3.   <li>「li:nth-child(2)」で指定</li>
    4. 
                        
  4.   <li>「li:nth-child(3)」で指定</li>
    5. 
                        
  5.   <li>「li:nth-child(4)」で指定</li>
    6. 
                        
  6.   <li>「li:last-child」と「li:nth-child(5)」で指定</li>
    7. 
                        
  7. </ul>
    8.
竹馬

「nth-child」の値は他にもあって、「(odd)」なら奇数、「(even)」なら偶数を指定します。さらに「(3n)」のように「n」を付ければ3の倍数「3，6、9…」が指定できます。

記述したHTMLとCSSの確認

それでは最後に「お店情報」のHTMLとCSSを確認しておきましょう。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                        
  10. <main>
    11. 
                        
  11.   ～スライダーの記述省略～
    12. 
                        
  12.   ～お知らせの記述省略～
    13. 
                        
  13.   ～メニューの記述省略～
    14. 
                        
  14.   <section id="shop">
    15. 
                        
  15.     <div class="inner">
    16. 
                        
  16.       <div class="title">
    17. 
                        
  17.         <h2>お店情報</h2>
    18. 
                        
  18.       </div>
    19. 
                        
  19.       <div class="shopWrap">
    20. 
                        
  20.         <div class="map">
    21. 
                        
  21.           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52430.6695921149!2d135.4922664590351!3d34.782868520671215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e4a6bda73c45%3A0x527cc777508a7d95!2z5aSn6Ziq5bqc5ZC555Sw5biC!5e0!3m2!1sja!2sjp!4v1630053102538!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    22. 
                        
  22.         </div>
    23. 
                        
  23.         <div class="shopInfo">
    24. 
                        
  24.           <dl>
    25. 
                        
  25.             <dt>店舗名</dt>
    26. 
                        
  26.             <dd>いやしのカレー サンプル</dd>
    27. 
                        
  27.           </dl>
    28. 
                        
  28.           <dl>
    29. 
                        
  29.             <dt>所在地</dt>
    30. 
                        
  30.             <dd>大阪府吹田市○○</dd>
    31. 
                        
  31.           </dl>
    32. 
                        
  32.           <dl>
    33. 
                        
  33.             <dt>TEL</dt>
    34. 
                        
  34.             <dd>06-○○○○-○○○○</dd>
    35. 
                        
  35.           </dl>
    36. 
                        
  36.           <dl>
    37. 
                        
  37.             <dt>営業時間</dt>
    38. 
                        
  38.             <dd>10：00 ～ 23:00<br>※ラストオーダー : 22:00</dd>
    39. 
                        
  39.           </dl>
    40. 
                        
  40.           <dl>
    41. 
                        
  41.             <dt>店休日</dt>
    42. 
                        
  42.             <dd>水曜日</dd>
    43. 
                        
  43.           </dl>
    44. 
                        
  44.         </div>
    45. 
                        
  45.       </div>
    46. 
                        
  46.     </div>
    47. 
                        
  47.   </section>
    48. 
                        
  48. </main>
    49. 
                        
  49. ～JSファイルの読み込み省略～
    50. 
                        
  50. </body>
    51. 
                        
  51. </html>
    52.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. ～スライダーデザイン省略～
    5. 
                    	
  5. ～お知らせデザイン省略～
    6. 
                    	
  6. ～メニューデザイン省略～
    7. 
                    	
  7. /* ------ shop ------ */
    8. 
                    	
  8. #shop {
    9. 
                    	
  9.   padding-top: 80px;
    10. 
                    	
  10.   margin-top: -80px
    11. 
                    	
  11. }
    12. 
                    	
  12. #shop .inner {
    13. 
                    	
  13.   width: 1200px;
    14. 
                    	
  14.   text-align: center;
    15. 
                    	
  15.   padding: 80px 10px;
    16. 
                    	
  16.   margin: 0 auto
    17. 
                    	
  17. }
    18. 
                    	
  18. #shop h2 {
    19. 
                    	
  19.   font-size: 2.4rem;
    20. 
                    	
  20.   letter-spacing: 0.09em
    21. 
                    	
  21. }
    22. 
                    	
  22. #shop .shopWrap {
    23. 
                    	
  23.   font-size: 0;
    24. 
                    	
  24.   margin-top: 60px
    25. 
                    	
  25. }
    26. 
                    	
  26. #shop .shopWrap .map {
    27. 
                    	
  27.   width: 820px;
    28. 
                    	
  28.   vertical-align: middle;
    29. 
                    	
  29.   display: inline-block
    30. 
                    	
  30. }
    31. 
                    	
  31. #shop .shopWrap .shopInfo {
    32. 
                    	
  32.   width: 280px;
    33. 
                    	
  33.   font-size: 1.6rem;
    34. 
                    	
  34.   letter-spacing: 0.09em;
    35. 
                    	
  35.   vertical-align: middle;
    36. 
                    	
  36.   text-align: left;
    37. 
                    	
  37.   margin-left: 60px;
    38. 
                    	
  38.   display: inline-block
    39. 
                    	
  39. }
    40. 
                    	
  40. #shop .shopWrap .shopInfo dl {
    41. 
                    	
  41.   padding: 20px 0;
    42. 
                    	
  42.   border-bottom: 1px solid #c1c1c1
    43. 
                    	
  43. }
    44. 
                    	
  44. #shop .shopWrap .shopInfo dl:first-child { border-top: 1px solid #c1c1c1 }
    45. 
                    	
  45. #shop .shopWrap .shopInfo dt {
    46. 
                    	
  46.   font-size: 1.3rem;
    47. 
                    	
  47.   letter-spacing: 0.09em;
    48. 
                    	
  48. }
    49. 
                    	
  49. #shop .shopWrap .shopInfo dd {
    50. 
                    	
  50.   font-size: 1.6rem;
    51. 
                    	
  51.   letter-spacing: 0.09em;
    52. 
                    	
  52.   margin-top: 10px
    53. 
                    	
  53. }
    54. 
                    	
  54. @media screen and (max-width: 768px) {
    55. 
                    	
  55.   #shop {
    56. 
                    	
  56.     padding-top: 60px;
    57. 
                    	
  57.     margin-top: -60px
    58. 
                    	
  58.   }
    59. 
                    	
  59.   #shop .inner {
    60. 
                    	
  60.     width: 100%;
    61. 
                    	
  61.     padding: 60px 4%;
    62. 
                    	
  62.     margin: 0 auto
    63. 
                    	
  63.   }
    64. 
                    	
  64.   #shop h2 { font-size: 2rem }
    65. 
                    	
  65.   #shop .shopWrap .map {
    66. 
                    	
  66.     width: 100%;
    67. 
                    	
  67.     display: block
    68. 
                    	
  68.   }
    69. 
                    	
  69.   #shop .shopWrap .map iframe {
    70. 
                    	
  70.     width: 100%;
    71. 
                    	
  71.     height: 400px;
    72. 
                    	
  72.   }
    73. 
                     	
  73.   #shop .shopWrap .shopInfo {
    74. 
                     	
  74.     width: 100%;
    75. 
                     	
  75.     margin-top: 60px;
    76. 
                    	
  76.     margin-left: 0;
    77. 
                    	
  77.     display: block
    78. 
                    	
  78.   }
    79. 
                    	
  79. }
    80.

「お店情報」はGoogleマップの埋め込みが必要ですが、埋め込みコードを取得して貼り付けるのもCSSで設定するのも簡単です。サクッとできたかと思います。

そして次のfooter部分はさらに簡単です（笑）。ここを仕上げればトップページが完成しますのでこの勢いでやってしまいましょう。

メニューはタブを使って表示する コピーライトとSNSリンクの設置

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記