地図は、ビジネスWebサイトの重要な側面です。 たとえあなたが完全にインターネットベースであるとしても、顧客はあなたが誰で、どこに住んでいるかを知りたがっています。 Googleマップは、最も使いやすく、一見最も正確で無料であるため、多くのWebサイトのデフォルトになりました。 このチュートリアルの終わりまでに、レスポンシブGoogleマップをWebサイトに埋め込む方法を正確に理解できます。
デフォルトのGoogleマップは常に応答するわけではないため、さまざまな画面サイズに拡大縮小できない場合があります。 WordPressプラグインを使用するか、コードを使用して自分で埋め込むかによって、マップをレスポンシブにするために、CSSを数行追加する必要があります。
レスポンシブWebデザイン
ここでは、応答性が重要な用語です。 ユーザーエクスペリエンスとデバイスを考慮して、Webサイトへのアクセスに使用するデバイスに関係なく同じになるようにするWebデザインについて説明します。 たとえば、レスポンシブWebサイトは、デスクトップ、タブレット、スマートフォンのいずれでアクセスしても同じ品質のエクスペリエンスを提供する必要があります。
これを行うには、Webサイトがさまざまな解像度、画面サイズ、およびタッチに適応する必要があります。
レスポンシブGoogleマップをWebサイトに埋め込む
GoogleマップをWebサイトに埋め込むには、3つの方法があります。 WordPressテーマを使用する場合、機能が組み込まれている場合があります。プラグインを使用するか、Googleから任意のWebサイトにコードを直接埋め込むこともできます。 最初と2番目のオプションはWordPressユーザーに最適です。他のCMSもプラグインを使用するため、ここで説明します。 コードを使用する最後のオプションは、構築方法に関係なく、ほとんどのWebサイトで機能するはずです。
WordPressテーマを使用して、レスポンシブなGoogleマップを埋め込みます
一部のWordPressテーマには、Googleマップ専用の機能があります。 マップは現代のWebサイトにとって非常に基本的なものであるため、一部のテーマデザイナーはマップを直接デザインに実装しています。 テーマにマップ機能がある場合、機能させるにはGoogle Maps APIが必要になる可能性があります。 APIをテーマオプションに追加すると、Googleと直接対話して、訪問のたびにマップを作成します。
- Googleウェブサイトのこのページにアクセスして、APIプロセスを開始してください。
- 青い[開始]ボタンを選択します。
- 新しい画面の左上にある3行のメニューアイコンを選択します。
- [APIとサービス]、[資格情報]の順に選択します。
- [認証情報の作成]を選択し、[APIキー]を選択します。
- [キーの制限]を選択し、[HTTPリファラー]を選択します。
- 保存を選択します。
- APIキーをコピーし、それを必要とする設計オプションページに貼り付けます。
APIキーを取得したら、テーマデザインツールを使用してWebサイトにGoogleマップを実装できます。 テーマがレスポンシブである限り、マップもレスポンシブである必要があります。
プラグインを使用してレスポンシブなGoogleマップを埋め込む
WordPressはプラグインを使用し、Joomlaは拡張機能を使用し、Drupalはモジュールまたはプラグインを使用し、他のCMSは同様の命名規則を使用します。 いずれにしても、プラグインは、コアCMSにボルトで固定して機能を追加できるモジュラー要素を指します。 便利な機能の1つがGoogleマップです。 Webサイトのテーマにマップ要素が含まれておらず、自分でコードを実行したくない場合は、プラグインが次に最適です。
- WordPressで、[プラグイン]に移動して[新規追加]を選択します。
- Googleマップを検索し、好みのプラグインを選択します。
- プラグイン内で有効にし、設定に移動します。
- 上記で作成したGoogle Maps APIを指定された場所に追加し、保存します。
- マップを表示する場所にプラグインを実装します。
他のCMSの命名とメニューの位置はわずかに異なりますが、原理はほとんど同じです。 すべてではないにしても、ほとんどのマッププラグインを使用するには、Google Maps APIが必要です。
コードを使用してレスポンシブなGoogleマップを埋め込む
WordPressや他のCMSを使用しない場合でも、レスポンシブなGoogleマップを埋め込むことができます。 モジュールの代わりにコードを使用するだけです。 少し手間がかかりますが、同じレスポンシブマップを提供します。
- Googleマップにアクセスして、表示する地図が画面いっぱいになるまでナビゲートします。
- 青い共有リンクを選択し、埋め込みマップからコードをコピーします。
- からの間のコードに特定の埋め込みコードを追加します。
- マップを表示するWebページのHTML内にコードを追加します。
- 変更を保存します。
コード：
これは私のコードではありません。オンラインで見つけましたが、私のウェブサイトでテストしました。 これは魅力のように機能し、CMS、HTML、Hugo、または他の多くのWebサイト言語またはページツールのいずれを使用しても機能するはずです。
