ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【Google Map】API無しでサイトへGoogleマップを埋め込む方法

グーグルマップをウェブサイトに埋め込む一番簡単な方法

多くの方がご愛用の「Googleマップ」。

お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。

このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。

 

後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。

今回は前者のシンプルなGoogleマップの埋め込み方法について解説したいと思います。

 

Googleマップの共有からコード取得し、iframe埋め込み

見出し通りの流れではありますが一つ一つ手順を追って解説します。

Googleマップで埋め込みたい施設を検索

まずはPCでGoogleマップのページを開きましょう。⇒Google マップ

 

そして次に地図を検索するなどして埋め込みたいお店、施設などを表示させます。

埋め込みたい施設の情報が画面左側に表示されると思います。複数候補がある場合は一覧表示されるので、埋め込みたい1箇所だけ選択しましょう。

 

施設情報から「共有」をクリックして「地図を埋め込む」HTMLコードをコピー

グーグルマップをホームページに埋め込んで表示させる方法

左側に表示される施設の情報画面内の、青くて丸いアイコンが並んでる中から共有ボタンをクリックしします。

すると、ポップアップウィンドウで共有方法を選択する画面が出てくるので、「リンクを送信」ではなく「地図を埋め込む」を選びましょう。

グーグルマップでHPに地図を埋め込んで表示させる方法

好きなサイズを選んでから「HTMLをコピー」をクリックして埋め込みコードをコピーします。

 

埋め込みたいサイトにHTMLコードをペースト

あとはWebサイトにこのiframeで出来たコードを埋め込むだけ。

HTMLとして埋め込む必要があるので

  • はてなブログでは「HTML編集」モード
  • WordPressのクラシックエディタであれば「テキスト編集」モード
  • WordPressのブロックエディタであれば「HTML埋め込み」ブロックを選択

などのサイトの編集環境に応じたHTML記述モードにして、コピーしたコードを貼り付けてください。

 

これだけでGoogleマップがちゃんと埋め込まれたはずです。

 

Googleマップ埋め込み例↓

いかがでしょうか。これはサイズを小にして埋め込んでいます。

 

さらにちょっとしたコードの修正でスマホへレスポンシブ対応も可能なのでやっておきましょう。

 

Googleマップのiframe簡易埋め込みレスポンシブ対応

Googleマップから取得した埋め込みコードは以下のような記述になってるかと思います。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6560.376112240083!2d135.49067977736382!3d34.70043642173786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68d184cbfed%3A0xcddcd36b1d3ff7b9!2z44CSNTMwLTAwMDEg5aSn6Ziq5bqc5aSn6Ziq5biC5YyX5Yy65qKF55Sw!5e0!3m2!1sja!2sjp!4v1605826714754!5m2!1sja!2sjp" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

 

このコード内の

  • widthが埋め込む部分の幅
  • heightが埋め込む部分の高さ

という設定になっています。

通常、単位が付いていない状態ではピクセル単位でサイズ指定されている状態です。

多くのスマホが画面幅400ピクセル以下でサイト表示されるようになっているので、それ以上の値になっていると横にはみ出してしまいレイアウトが崩れてしまいます。

(当はてなブログテーマではiframeがはみ出さないようCSSで制御されています)

かといって300ピクセルなどの値ではPCで見た場合にマップが小さく表示されて見づらくなってしまいます。

これをレスポンシブ対応させるとなると、「width="100%"」と幅を埋め込みエリアいっぱいに広がるよう指定すると良いかと思います。

 

コードをwidth="100%"指定にした例

 

これでスマホでレイアウトを崩さず、幅一杯に見やすく表示されます。

逆にPCではそこまで広がってほしくないという場合はCSSでメディアクエリを用いた記述を加えるなどする必要があります。

高さについても埋め込む縦横の比率を保ったまま可変式のレスポンシブ対応にするにはテクニックが必要です。

またその辺りのCSSの書き方は別でまとめたいと思います。

このように簡単なスマホ対応としては幅を100%にして、高さはPC/スマホ共にある程度見やすい値を単位を付けずに指定しておくのが無難かと思います。

 

マップの埋め込みだけならGoogle Maps APIは不要

以上の解説で、シンプルな実装であればAPIを利用しなくても簡単にマップ埋め込みが出来ると御理解頂けたのではないでしょうか。

見た目など、より高度なカスタマイズをご希望の場合は、少し詳しい方や専門家にご相談頂くのが近道かもしれません。

単に「アクセスページにマップを埋め込みたい」というような方には、是非ご参考頂ければ幸いです。

 

最後までお読みいただいてありがとうございました!

 

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp