Googleマップをもっと見やすく！ズームレベルの設定方法
ENOWL_Nao
ENOWL（エノウル）
初心者でもできる！GoogleマップをWebサイトに埋め込む方法
ENOWL_Nao
どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。
今回は、GoogleマップをWebサイトに埋め込む方法を解説します。
そんなに難しくないので、一緒にやっていきましょう！
GoogleマップをWebサイトに埋め込みたいという要望はよくあるので、対応できるようにしておきましょう。
この記事の見出し
Googleマップを埋め込む手順
ステップ1: Googleマップの取得
まず、Googleマップで埋め込みたい場所を検索しましょう！
検索結果が表示されたら、左側のメニューから「共有」をクリックします。
「地図を埋め込む」を選択します。
ステップ2: HTMLコードのコピー
「地図を埋め込む」を選択すると、埋め込み用のHTMLコードが表示されます。
このコードをコピーします。
ステップ3: HTMLに貼り付け
次に、コピーしたHTMLコードをあなたのWebサイトのHTMLファイルに貼り付けます。
以下のように、iframeタグを使用してGoogleマップを埋め込みます。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.656783806038!2d139.81070040000003!3d35.710062699999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1729169827928!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>これで埋め込みは完了です！
Googleマップのカスタマイズ
必要に応じて、埋め込んだGoogleマップをWebサイトのデザインに合わせてカスタマイズします。
以下に例をいくつか紹介します！
幅と高さの変更
デフォルトの幅と高さを変更して、ページのレイアウトに合わせます。
widthを100%、heightを400pxに設定してみました。
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093747!2d144.95373531531695!3d-37.81627977975195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d9f0b6b1a1b1!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1611816751234!5m2!1sen!2sau" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
.google-map iframe{
height: 400px;
width: 100%;
}Googleマップの周りに枠線を追加
マップの周りに枠線を追加して、マップを強調します。
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093747!2d144.95373531531695!3d-37.81627977975195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d9f0b6b1a1b1!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1611816751234!5m2!1sen!2sau" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
.google-map{
border: 2px solid black;
height: 300px;
width: 400px;
}
.google-map iframe{
height: 100%;
width: 100%;
}まとめ
以上で、GoogleマップをWebサイトに埋め込む手順は完了です。
この方法を使えば、簡単にGoogleマップをWebサイトに追加できます。
ぜひ試してみてください！
最後までお読みいただき、ありがとうございました！
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
