こんばんは！最近は全てと言っても良いほどお店のホームページではお店までのアクセスページにGoogle地図が埋め込まれています。
「Googleマップってどうやって表示するんだろう？」と以前思っていました。やり方が解らなかったので凄く難しいプログラムを入れたりするのかな？と思っていました。という事でGoogleマップをホームページに埋め込む方法の備忘録です。
Googleマップをホームページに埋め込む方法
１．Googleマップを開く ＞ 目的の場所を入力する。今回はサッカーFC東京のスタジアム「味の素スタジアム」にしました。
２．メニューを選択する。
３．「地図を共有または埋め込む」をクリックする。
４．地図を埋め込むを選択 ＞ 選択されたリンクをコピーします。
５．コピーしたリンクをHTML内のBodyタグ、またはWordPressの記事を書く際にHTMLコードとして貼り付ければ完成です。
これで、ウェブサイトに Google マップが埋め込まれます。訪問者は、ウェブサイト上でマップを操作し、表示された場所を確認できます。
Google地図の埋め込み画面
下記は実際に埋め込んだGoogleマップです。このように簡単に動的な地図が表示できます。
埋め込むマップの表示方法やカスタマイズをカスタマイズするためのオプションもあります。たとえば、特定の場所のみを表示したり、ズームレベルを設定したり、マップのサイズを変更したりすることができます。埋め込みコードの生成時に表示されるオプションを調整することで、目的に合わせたカスタマイズが可能です。
Googleマップ埋め込み方法 まとめ
下記にGoogleマップを埋め込むことで得られるメリットをあげます。
- 位置情報の表示: Google マップを埋め込むことで、特定の場所やアドレスを直接ウェブページ上に表示することができます。訪問者はマップ上で目的地を確認し、場所を特定することができます。特に、店舗やイベント会場など、実際の場所を訪れる必要がある場合には、地図の表示が便利です。
- ナビゲーションの提供: Google マップには、ルート案内機能が備わっています。ウェブページに埋め込んだマップを使用することで、訪問者は直接ウェブページ上でナビゲーションを開始できます。これにより特定の場所への道順を簡単に提供できます。
- 目的地の周辺情報の表示: Google マップは、特定の場所周辺の情報を提供します。埋め込んだマップでは、目的地周辺の施設や事業所、レストラン、ホテルなどの情報も表示されます。訪問者は、目的地周辺の情報を直接確認できるため、旅行やイベントの計画に役立ちます。
- インタラクティブな体験: Google マップは、ズームイン・ズームアウト、スクロール、ドラッグなど、さまざまな操作をサポートしています。埋め込んだマップは、訪問者が直接操作することができます。これにより、訪問者は自分自身でマップを調べ、探索することができます。
- モバイル対応: Google マップは、モバイルデバイス上でも使用可能であり、レスポンシブなデザインに対応しています。したがって、ウェブページに埋め込んだマップは、ユーザーがスマートフォンやタブレットなどのモバイルデバイスでアクセスする場合にも正しく表示されます。
GoogleマップをHTMLに埋め込む方法は私が想像していたより簡単に埋め込むことができました！googleマップを追加したらWEBサイトのSEOなどを確認して集客率をあげましょう！それではー！
良ければ過去記事も見てみてください↓
