Googleマップのホームページ埋め込み方法！ルート・複数店舗の表示は無料？

Googleマップで取得した地図情報は無料で簡単にホームページやウェブサイトに埋め込み表示することができます。自分の会社や店舗のほかに、イベントで使用する会場の地図を表示させれば宣伝効果も高まります。ここでは、地図情報のHTMLタグの取得方法や、タグを埋め込む方法、実際に埋め込んだ時の表示のされ方などを紹介します。

Googleマップを使えば自分のホームページやウェブサイトに会社や店舗の地図を表示させることができます。
具体的な方法としては、Googleマップから地図情報のタグを取得し、テキストとして書き込むことでホームページに地図が表示されます。無料で簡単にできる方法をこれから紹介します。下の画像は新宿駅の地図を実際に表示してみたものです。

まずはGoogleマップで埋め込みたい地図を表示しましょう。
検索で住所や店舗などの名前を入力すればその位置に移動し、赤いピンが立ちます。
地図上の建物などの名前をクリックすることでもピンを立てられます。
これで地図情報を取得できました。

地図情報を取得した状態で、Googleマップ左上の端にあるメニューをクリックします。
「地図を共有または埋め込む」という項目があるので、これをクリック。

「共有」のウィンドウが表示されて、「リンクを送信する」と「地図を埋め込む」という二つの項目が表示されます。「地図を埋め込む」を選択するとHTMLタグを取得できるので、このタグをコピーします。

「この地図は自分専用です」という表示は気にしなくても大丈夫です。ウェブ上で公開すればほかの人も同じように地図が表示されます。

地図を埋め込みたいホームページを用意します。HTMLタグを入力するので見たままの編集モードだけでなく、HTMLを入力できるモードが必要です。

先ほどコピーしたHTMLタグをHTML編集モードでペーストしてください。プレビューで確認してみてちゃんと表示されていれば問題ありません。タグがそのまま表示されてしまう場合は、HTMLとして入力されていない場合があります。下の画像は新宿駅の地図情報を取得した時のHTMLタグです。

こんどは渋谷駅を表示してみました。地図の埋め込みは自分の会社や店舗だけでなく、イベントを開催したり参加する際に、来場者の方に知らせる場合も役立ちます。

先ほどの埋め込んだ渋谷の地図を、Chromeの画面サイズをスマホサイズに変更して表示してみました。埋め込んだ地図はスマホの画面に合わせて自動で最適化されるのでホームページ上で問題なく表示されています。
パソコンだけでなくスマホでも同様に表示されるので安心です。店舗などの場所を表すピンもしっかり表示されています。

次に先ほどの埋め込み方法から応用した埋め込みの方法を紹介します。店舗への最寄駅からのルートを表示して埋め込む方法と、複数のテンポを一つの地図に同時に表示させて埋め込む方法です。このどちらもホームページに無料で埋め込むことができます。