Googleマップをホームページやブログに埋め込むカンタンな方法

Googleマップ埋め込み方法04

今回は、Googleマップをホームページやブログに埋め込む方法について解説いたします。

ホームページやブログにGoogleマップを埋め込むことで、
会社やお店までのアクセス方法が分かりやすくなります!

埋め込みはカンタンなので、HTMLの知識がちょっとあれば大丈夫です!

Googleマップをホームページに埋め込むカンタンな方法

サンプルとして、「東京駅」を、このブログに埋め込んでみます。

(1)埋め込みたい場所を、Googleマップで表示します

まず、Googleマップで、ホームページやブログに埋め込みたい場所を表示しましょう!
ここでは、「東京駅」と入力しました。

Googleマップ埋め込み方法01

(2)「共有」マークを押します

つぎに、共有マークをクリックします。

Googleマップ埋め込み方法02

すると共有方法が選択できます。
今回は「地図を埋め込む」を選択しましょう。

Googleマップ埋め込み方法03

(3)地図の大きさを調整します。

埋め込む地図の縦横サイズを決めましょう。
「小」「中」「大」「カスタムサイズ」の4種類から選択できます。

Googleマップ埋め込み方法04

「小」…横400px 縦300px
「中」…横600px 縦450px
「大」…横800px 縦600px
「カスタムサイズ」…自由に数字を入力

なお、地図のズームレベルを調整したい場合は、
「CTRLキーを押しながらマウスホイール」で可能です。

(4)「埋め込みコード」をコピーします

埋め込みコードは、以下のようにとても長いです。
「HTMLをコピー」という個所を押すことで、埋め込みコードを丸ごとコピーできます。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2162.9965192692625!2d139.7652839627025!3d35.68111511958082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1529927231570″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

Googleマップ埋め込み方法05

(5)「埋め込みコード」をペーストします

埋め込みたいホームページやブログのHTMLに「埋め込みコード」をペーストします。

すると、以下のように、Googleマップを埋め込むことができます。


 

以上の5ステップで、Googleマップの埋め込みは終わりです。
慣れればカンタンです!

まとめ

今回はGoogleマップをホームページやブログに埋め込む方法について解説いたしました。

Googleストリートビューを埋め込む方法については、下記記事にまとめていますので、
よろしければご覧ください!

Googleストリートビュー埋め込み方法Googleストリートビューをホームページやブログに埋め込む方法
『Web集客』のご相談はこちらからどうぞ!

Web集客でしたら、360株式会社にお任せください!
検索エンジンからニーズを抽出する「サーチニーズマーケティング」で、
クライアントのビジネスに合わせた最新手法のWeb集客をご提案いたします。
お客様のニーズをつかむことは、売上アップにつながります。
単なるホームページではなく、集客ツールとしてのホームページにしませんか?
どうぞお気軽にご相談ください!

360株式会社のWebサイト