Google マップの運転ルートをウェブサイトに追加する

地点 A から地点 B に移動するためのマッピング アプリやサービスは数多くありますが、決定的な地図の王者は Google マップです。パソコン、タブレット、90% の時間をスマートフォンで使用しています。最高のデータ、ほとんどのナビゲーションと経路指定オプション、ストリートビュー、徒歩、自転車、公共交通機関の情報などの優れた機能を備えています。

しかし、Google の Web サイト以外の地図や経路を使用する必要がある場合はどうすればよいでしょうか?独自の結婚式のウェブサイトまたは個人のブログがあり、ゲストがあなたのサイトにアクセスして、住所を入力すると、イベントの場所への道順が自動的に表示されるとします。

これを達成するには、いくつかの方法があります。最も簡単な方法は、Google マップによって生成された埋め込みコードを使用して、Web ページにマップを埋め込むことです。 2 番目の方法は、もう少し技術的ですが、よりカスタマイズ可能で動的です。以下で両方の方法について説明します。

Google マップを埋め込む

ある場所から別の場所への道順だけを表示したい場合、最も簡単な方法は、埋め込みコードを使用して表示中の地図を埋め込むことです。まず、Google マップで目的のルートを設定してから、ページの右下にある歯車のアイコンをクリックしてください。

[地図を共有または埋め込む] をクリックします [地図を埋め込む] をクリックします。 タブ。ここでマップのサイズを選択し、iframe コードをコピーして、好きな Web ページにドロップできます。

この方法の唯一の欠点は、ユーザーには静的な地図しか表示されないことです。以下の 2 番目の方法では、フォームを作成して、ユーザーが任意の開始アドレスを入力すると、そのアドレスから選択した宛先アドレスまでのマップが生成されます。

Google マップ フォームの作成

2 番目の方法の意味を説明すると、下のボックスに米国の住所を入力して、現在地から私の家までの道順を取得します。

いいですね。この小さなフォームは、Web サイト、ブログ、または HTML コードを配置できる場所ならどこでも簡単に作成できます。住所をコピーして新しいウィンドウを開いて最初の住所を入力するのではなく、連絡先ページに表示できるので、小規模ビジネスの Web サイトにも最適です。

では、この変更されたルート案内ボックスを作成するにはどうすればよいでしょうか?まず、Google が経路案内に使用する URL の正しい構文を取得する必要があります。幸いなことに、2 つの場所の間の経路を取得し、アドレス バーから URL をコピーするだけで、それを理解できます。ページの右下にある小さな歯車のアイコンをクリックして、[地図を共有または埋め込む] を選択することもできます。 .

[リンクの共有] タブには URL が含まれます。これは、ブラウザのアドレス バーにある URL と同じです。先に進み、URL 全体を以下に貼り付けて、それがどのように見えるかを示しました。

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd, +Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.726!80d94!1d-96.726234!13z/ データ=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.726! 1m1！ 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

なるほど！それはかなり長いです！そこにはたくさんのものがありますが、そのほとんどは意味がありません! Google マップの URL パラメータは、以前は非常に単純で簡単でしたが、新しい URL 構造は非常に複雑です。ありがたいことに、古いパラメータを引き続き使用でき、Google がそれらを新しいバージョンに自動的に変換します。私が何を意味するかを理解するには、以下のリンクをチェックしてください。

https://maps.google.com/maps?saddr=start&daddr=end

どうぞ、試してみてください。開始アドレスと終了アドレスを引用符で囲んでアドレスを入力し、URL をブラウザに貼り付けます。始点を故郷のニューオーリンズ、終点をテキサス州ヒューストンに置き換えたので、Google マップのルート URL は次のようになります。

https://maps.google.com/maps?saddr=”ニューオーリンズ、ラ”&daddr=”ヒューストン、テキサス”

うまくいきました!ただし、ご覧のとおり、マップが完全に読み込まれると、Google マップはリンクをはるかに複雑なものに変換します。 OK、これで Google マップに渡すことができる適切な URL が得られたので、2 つのフィールドを持つ単純なフォームを作成する必要があります。1 つは出発地の住所用で、もう 1 つは目的地の住所用です。

ユーザーが住所を入力するだけで目的地までの道順を取得できるようにする場合は、2 番目のフィールドを非表示にして、目的地の住所に設定する必要があります。

上記のコードを確認してください。最初の行はフォームから始まり、送信ボタンがクリックされたときにデータが maps.google.com/maps に送信される必要があることを示しています。 target=blank 結果を新しいウィンドウで開くことを意味します。次に、空白の開始アドレスのテキスト ボックスがあります。

2 番目のテキスト ボックスは非表示になっており、値は目的の宛先アドレスです。最後に、「Get Directions」というタイトルの送信ボタンがあります。誰かが住所を入力すると、次のように表示されます:

いくつかの追加パラメーターを使用して、方向をカスタマイズし、さらに地図を作成できます。たとえば、デフォルト ビューを地図ではなく、航空写真にしたいとします。 トラフィックを表示 .

https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

layer=t に注意してください そしてt=h URL のフィールド。 layer=t はトラフィック レイヤー用で、t=h はハイブリッド マップを意味します。 t m に設定することもできます 法線マップの場合、k 衛星および p の場合 地形用。 z はズーム レベルで、1 から 20 まで変更できます。上記の URL では 7 に設定されています。これらを最終的な URL に追加するだけで、高度にカスタマイズされた Google マップのルート案内フォームがサイトに表示されます。

これに問題がある場合は、コメントを投稿してください。私がお手伝いします!お楽しみください!