• HOME > 
  • HTML > 
  • HTMLにGoogle MAP(グーグルマップ)の埋め込みを...

HTMLにGoogle MAP(グーグルマップ)の埋め込みを行う方法

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2020年12月16日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

Google MAPとは?

埋め込みとは?

自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。

簡単かつ無料なうえ、ページ内で地図を移動するなどといったことまでできますので店舗のサイトなどでは活用されています。

Google MAPの埋め込みの仕方

実際に東京駅の地図を例にgoogle MAPを埋め込む手順を説明します。

表示させたいGoogle MAPのページにアクセス

住所がわかっている場合は住所を打ち込んでgoogle検索します。

住所を検索する

表示されたgoogle MAPをクリックして開きます。

埋め込み用のHTMLをコピーする

共有をクリック

google MAPのページにある「共有」ボタンをクリックします。

地図を埋め込む

ポップアップが表示されるので「地図を埋め込む」タブをクリックし、「HTMLをコピー」をクリックします。

この時、「大」「中」「小」の表示サイズを選択してコピーすることが出来ます。(後々手入力で変更も出来ます)

コピーしたHTMLコードをを自身のサイトの任意の場所に貼りつける

あとは、地図を表示させたい場所に貼りつければ完了です。

        <p>Googleマップをこの下に表示</p>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.634640240818!2d139.76112127614763!3d35.68149987077672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bf97912d02d%3A0xee1220ee8337117!2z44CSMTAwLTAwMDUg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Li444Gu5YaF77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1607928300221!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    

Googleマップをこの下に表示

Googleマップは<iframe>タグというHTML内に別のHTMLファイルを表示させるタグを用いて表示するようにされています。 <iframe>タグのwidthやheightを変更すれば地図の大きさを変更することが可能です。

まとめ

このように簡単にgoogle MAPを自身のページに表示できます。便利な地図を無料で使えるので是非活用してみてはいかがでしょうか?

広告
広告

関連する記事

サムネイル

HTMLのpicture要素とsourceタグの使い方【レス……

2024年11月07日
picture要素を使った画像の表示について備忘録としてまとめます。 picture要素とは? HTMLのpicture要素は、様々な画面サイズやブラウザに合わ […]
サムネイル

video要素とsource要素で画面サイズに応じて読み込む……

2024年09月19日
最終更新日:2024年11月07日
HTMLのsource要素とは? HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素で […]
サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting(キャッシュバスティング)とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。
サムネイル

HTMLでラジオボタンを作成する方法【初期値の設定・チェック……

2023年08月08日
HTMLのinputタグのtype属性にradioを指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。