あなたのウェブサイトにGoogleマップの運転ルートを追加する
A地点からB地点に移動するためのマッピングアプリケーションやサービスは数多くありますが、最も信頼できる地図の王者はGoogleマップです。私は自分のコンピューター、タブレット、そしてスマートフォンの90％の時間でそれを使っています。それは最高のデータ、最もナビゲーションとルーティングのオプション、そしてストリートビューやウォーキング、サイクリング、大量輸送情報のようなクールな機能を持っています.
しかし、GoogleのWebサイト以外の場所で地図や道順を使用する必要がある場合はどうなりますか。あなたがあなた自身の結婚式のウェブサイトか個人的なブログを持っていて、ゲストがあなたのサイトを訪れることができて、彼らが来ることになるアドレスをタイプして自動的にイベント場所への道順を得る!
さて、あなたがこれを成し遂げるために行くことができるいくつかの方法があります。最も簡単な方法は、Googleマップによって生成された埋め込みコードを使用してWebページに地図を埋め込むことです。 2番目の方法は、もう少し技術的ですが、よりカスタマイズ可能で動的です。以下に両方の方法について説明します。.
Google Mapを埋め込む
ある場所から別の場所への道順を表示するだけの場合は、埋め込むコードを使用して表示している地図を埋め込むのが最も簡単です。まず、Googleマップで必要な方向を設定してから、ページの右下にある歯車のアイコンをクリックします。.
クリック 地図を共有または埋め込む をクリックして 地図を埋め込む タブ。ここであなたはあなたの地図のサイズを選んでそれからiframeコードをコピーしてあなたが好きなウェブページにそれをドロップすることができます.
この方法の唯一の欠点は、ユーザーが静的マップを見るだけであることです。以下の2番目の方法では、ユーザーが任意の開始アドレスを入力できるフォームを作成し、そのアドレスから選択した宛先アドレスへのマップを生成します。.
Googleマップフォームを作成する
私が2番目の方法で何を意味するのかを説明するために、先に進み、下のボックスに米国の住所を入力して、あなたの所在地から私の家までの道順を取得します。
クールでしょ？この小さなフォームは、Webサイト、ブログ、またはHTMLコードを配置できる場所ならどこでも簡単に作成できます。アドレスをコピーして新しいウィンドウを開いて開始アドレスを入力するのではなく、連絡先ページに表示したり、案内をすばやく取得したりできるため、小規模ビジネスのWebサイトにも最適です。.
それでは、どのように私たちはこの修正された道順の取得ボックスを作成することに取り掛かるのですか？まず最初に、Googleがルート案内に使用するURLの正しい構文を取得する必要があります。幸いなことに、2つの場所の間で道順を取得してから、アドレスバーからURLをコピーするだけでそれを理解できます。ページの右下にある小さな歯車のアイコンをクリックして選択することもできます。 地図を共有または埋め込む.
[共有リンク]タブには、ブラウザのアドレスバーと同じURLが含まれています。私は先に行って、それがどのように見えるかをあなたに示すためだけに下記のURL全体を貼り付けました.
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 +ディアフィールド+道路、+アレン、+ TX + 75013、+アメリカ合衆国/ @ 33.1125686、-96.7557749、13z / data =！3m1！4b1！4m13！4m12！1m5！1s0x864c3d45018517a5：0xbabd3c91a1321997！2m2！1d-96.762484！2d33.08947m 1m5！ 1s0x864c16d3018a7f4f：0xab2052b5786cd29f！2m2！1d-96.666151！2d33.133892
いいね！それはかなり長いです！そこにはたくさんのものがありますが、そのほとんどは意味をなさない！ GoogleマップのURLパラメータは非常に単純で簡単でしたが、新しいURL構造は非常に複雑です。ありがたいことに、あなたはまだ古いパラメータを使用することができ、Googleはそれらを自動的に新しいバージョンに変換します。私の言っていることを見るには、下のリンクをチェックしてください。.
http://maps.google.com/maps?saddr=start&daddr=end
先に行き、そしてそれに打撃を与えなさい。開始アドレスと終了アドレスを引用符で囲んでURLをブラウザに貼り付けます。私の出身地はニューオーリンズで、テキサス州ヒューストンで終わったので、これが私のGoogleマップの道順URLのようになります。
http://maps.google.com/maps?saddr="newlelena、la”＆daddr =” houston、tx”
できます！しかし、ご覧のとおり、Googleマップでは、地図が完全に読み込まれるとリンクがはるかに複雑なものに変換されます。これで、Googleマップに渡すことができる正当なURLができたので、開始アドレスと宛先アドレスの2つのフィールドを持つ単純なフォームを作成する必要があります。.
住所を入力して自分の場所への道順を取得するだけの場合は、2番目のフィールドを非表示にして、既に目的の住所に設定しておきます。.
開始アドレスを入力してください。
上記のコードをチェックしてください。最初の行はフォームから始まり、送信ボタンをクリックするとデータがmaps.google.com/mapsに送信されます。の ターゲット=空白 結果を新しいウィンドウで開くことを意味します。次に、開始アドレスのテキストボックスがあります。これは空白です。.
2番目のテキストボックスは非表示になっており、値は目的の宛先アドレスです。最後に、「道順を取得」というタイトルの送信ボタンがあります。誰かが自分の住所を入力すると、これが表示されます。
方向をカスタマイズしたり、いくつかの追加パラメータを使用してさらにマップしたりできます。たとえば、デフォルトのビューをマップにしたくないが、代わりにビューにしたいとします。 衛星 とショー トラフィック.
http://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はハイブリッドマップを表します! トン にも設定できます メートル 法線マップ用, k 衛星と p 地形用. z 上記のURLでは、7に設定されています。これらを最終URLに追加するだけで、サイト上で高度にカスタマイズされたGoogleマップの道順の取得フォームが表示されます。!
これに関する問題を抱えて、コメントを投稿してください、そして、私は助けようとします！楽しい!
