Web サイトに Google の経路案内を追加する方法

Web サイトに Google の経路案内を追加する方法を知りたい場合は、この投稿をお読みください。Google マップは、世界中で最も人気のあるデジタル マップ サービスです。リアルタイムの交通情報を使用して、目的地への最良のルートを見つけます。Google マップをブログや Web サイトに埋め込むと、訪問者は世界地図上の自分の位置を確認したり、住所を見たり、レビューを読んだりすることができます（利用可能な場合）。Google マップの独自の埋め込みコード ジェネレーターを使用してマップを Web サイトに簡単に埋め込むことができますが、そのマップをナビゲーション ツールとして使用して、訪問者が自分の場所への経路を見つけるのを助けることはできません。この投稿では、Google マップを使用して訪問者に経路案内を表示する方法を紹介します。

Web サイトに Google の経路案内を追加する方法

Web サイトに Google の経路案内を追加できる次の 2 つの方法について説明します。

1. 静的な Google マップを埋め込み、HTML フォームを使用してマップ ルートを表示する
2. Maps iFrame ジェネレーターを使用する

これらの方法を詳しく見ていきましょう。

1] 静的な Google マップを埋め込み、HTML フォームを使用してマップ ルートを表示する

この方法には 2 つのステップがあります。ステップ 1 は、自分の場所を特定する静的なGoogle マップを埋め込むことです。ステップ 2 は、ユーザーの場所を受け入れ、Google マップ上にルート マップを作成する HTML フォームを追加することです。これを行う方法を見てみましょう。

A] Google マップを Web サイトに埋め込む

1. ブラウザーを起動します。
2. 新しいブラウザー タブで Google マップを開きます。
3. 左上隅にある Google マップの検索バーに住所を入力します。
4. 表示された結果のリストから場所を選択します。
   注意:住所が見つからない場合は、Google マップをズームして追跡します。Google マップのストリート ビュー パノラマを使用して、地図上の自分の場所を示すことができます。場所が見つかったら、「場所を追加する」または「ビジネスを追加する」オプションを使用して適切な住所の詳細を入力し、Google にレビューのために場所を送信します。リクエストの送信から数時間以内に追加されます。
5. Google マップに自分の場所が特定されたら、共有アイコンをクリックします。
6. マップを埋め込むタブに切り替えます。
7. HTLM をコピーリンクをクリックして、マップ コードをクリップボードにコピーします。事前定義されたサイズ（小、中、大）を選択するか、カスタム サイズを入力して、Web サイトにマップが表示されるサイズを決定できます。
8. 次に、Web サイトの管理パネルに移動します。
9. マップを埋め込みたい Web ページを開きます。
10. コード エディター ビューに切り替えます。
11. コードを貼り付けます。
12. コード エディターを終了します。Google マップのプレビューが表示されます。

B] HTML フォームを使用して Google マップにナビゲーション ルートを作成する

1. コード エディター ビューに戻ります。
2. 次の画像に示されているコードを Google マップ コードの下に追加します。
3. 画像で強調表示されている目的地の住所の値を、自分の場所の住所に置き換えます。
4. コード エディター ビューを終了します。
5. コードをプレビューして、機能しているかどうかを確認します。これを行うには、「住所を入力する」フィールドに住所を追加して、経路案内を表示ボタンを押します。
6. 上記のアクションは、入力された住所から Google マップ上の自分の場所までのルートを表示するはずです。
7. すべて正常に機能する場合は、コードを公開できます。

2] Maps iFrame ジェネレーターを使用する

1. ブラウザーを起動します。
2. 新しいブラウザー タブで Free HTML Map Generator を開きます。
3. 左パネルの住所を入力する検索ボックスに住所を入力します。
4. 右側の画面に Google マップで自分の場所が表示されます。マップの種類、ズーム距離、幅、高さを調整できます。マップをレスポンシブにするオプションの横にあるトグル ボタンをクリックして、マップをレスポンシブにすることもできます。
5. 下部にあるHTML コードを生成するボタンをクリックします。
6. コードが表示されます。コードをクリップボードにコピーするボタンをクリックします。
7. Web サイトの管理パネルに移動します。
8. マップを配置するページを開きます。
9. コード エディター ビューに切り替えます。
10. コードを貼り付けます。
11. コード エディターを終了します。
12. プレビューボタンをクリックします。マップのプレビューが表示されます。
13. 道順アイコンをクリックします。
14. Google マップが開き、住所が目的地の住所として事前に入力されます。
15. 開始住所を入力します。自分の場所オプションを使用して、Google マップで現在の場所を使用することもできます。
16. マップ ルートが表示されます。
17. すべて正常に機能する場合は、ページを公開します。

これで、訪問者は Web サイトに埋め込まれた Google マップで自分の場所を確認し、自分の場所から自分の場所までの経路案内を見つけることができます。この投稿が参考になれば幸いです。ご質問がある場合は、コメントでお知らせください。

Google マップの住所を HTML に追加するにはどうすればよいですか?

はい、Google の埋め込みコード ジェネレーターまたは Google の無料 HTML マップ ジェネレーターを使用することで、Google マップを HTML Web サイトまたはブログに追加できます。どちらのオプションでも、赤い風船で住所を特定する Google マップを埋め込むことができますが、それらにはわずかな違いがあります。前者では、訪問者が正確な場所、近くのランドマークなどを確認できる静的なマップを埋め込むことができますが、後者には、訪問者が自分の場所への経路案内を見つけるために使用できる完全なルート マップを作成する道順機能があります。ニーズに応じて、どちらかのオプションを使用して Google マップを Web サイトまたはブログに追加できます。

Google マップの埋め込みコードを取得する方法

Google マップの埋め込みコードを取得するのは非常に簡単です。ブラウザー ウィンドウの新しいタブで Google マップを開き、利用可能な検索バーに住所を入力するだけです。マップが住所を選択して表示したら、共有アイコンをクリックします。共有ウィンドウで、マップを埋め込むタブをクリックします。次に、右上隅にあるHTML をコピーリンクをクリックします。以上です。Google マップのメニュー（ハンバーガー アイコン）をクリックして、マップを共有または埋め込むオプションをクリックすることもできます。このコードを取得する別の方法は、上記の投稿の方法 2 で説明されているように、無料 HTML マップ ジェネレーター（マップ iFrame ジェネレーター）を使用することです。