A地点からB地点に至るまでに多くのマッピングアプリとサービスがありますが、地図の決定的な王はGoogleマップです。私は自分のコンピュータ、タブレット、スマートフォンの90％の時間にそれを使用します。
しかし、Googleのウェブサイト以外で地図やルートを使用する必要がある場合はどうすればよいですか？あなた自身の結婚式のウェブサイトや個人的なブログを持っていて、ゲストがあなたのサイトを訪問し、彼らが来る予定のアドレスを入力し、自動的にイベントの場所への道順を得ることができたとしましょう！
あなたがこれを達成するために行く方法。最も簡単な方法は、Googleマップで生成された埋め込みコードを使用してウェブページに地図を埋め込むことです。 2番目の方法は、技術的にはもう少しですが、よりカスタマイズ可能でダイナミックです。
Googleマップを埋め込む
ある場所から別の場所への道順を表示したい場合は、現在地の地図を埋め込むことが一番簡単です埋め込みコードを使用して表示します。まず、Googleマップで必要な方向を設定し、ページの右下にある歯車アイコンをクリックします。
[マップを共有または埋め込む]をクリックし、[地図を埋め込む]タブをクリックします。ここであなたの地図のサイズを選択し、iframeコードをコピーして好きなウェブページにドロップすることができます。
この方法は、ユーザーが静的なマップを見ただけです。以下の2番目の方法では、ユーザーが任意の開始アドレスを入力できるフォームを作成し、そのアドレスから選択した宛先アドレスにマップを生成します。
Googleマップフォームを作成する
2番目の方法の意味を説明するため、下のボックスに米国の住所を入力して、あなたの所在地から私の家への道順を取得してください。
クールハァッ？あなたは簡単にこの小さなフォームを任意のウェブサイト、ブログ、またはどこでも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.762484！2d33.08947！1m5！1m1！ 1s0x864c16d3018a7f4f：0xab2052b5786cd29f！2m2！1d-96.666151！2d33.133892
Yikes！それはかなり長いです！そこにはたくさんのものがあり、そのほとんどは意味をなさない！ Google MapsのURLパラメータは非常に簡単ではありましたが、新しいURL構造は非常に複雑です。ありがたいことに、古いパラメータを使用することができ、Googleは新しいパラメータを自動的に新しいバージョンに変換します。
http://maps.google.com/maps?saddr=start&daddr=end
p>先に進み、それを撃つ。開始アドレスと終了アドレスの引用符でアドレスを入力し、ブラウザにURLを貼り付けてください！出発地をNew Orleansに置き換え、テキサス州ヒューストンで終わりました。これはGoogleマップのURLの例です：
http://maps.google.com/maps?saddr="new orleans、la "＆amp; daddr =" houston、tx "
それは動作します！しかし、地図が完全に読み込まれると、Googleマップはリンクをもっと複雑に変換します。さて、Google Mapsに渡すことができる純粋なURLがあるので、開始アドレスと宛先アドレスの2つのフィールドを持つ簡単なフォームを作成する必要があります。
人々が自分の住所を入力してあなたの場所への道順を知りたければ、2番目のフィールドを非表示にして宛先アドレスに設定します。 ＆lt; input type = "text" name = "saddr" />gt;開始アドレスをhttp://maps.google.co.jp/maps "method =" get "target =" _ blank " ; gt; ;
＆lt; / form＆gt;
上記のコードを確認してください。最初の行はフォームを開始し、送信ボタンをクリックすると、データがmaps.google.com/mapsに送信されることが示されています。 target = blankは、結果を新しいウィンドウで開くことを意味します。
2番目のテキストボックスは非表示になり、値は希望する宛先アドレスになります。最後に、「Get Directions」というタイトルの送信ボタンがあります。
方向や地図をカスタマイズして、さらにいくつかのパラメータを設定することができます。たとえば、デフォルトのビューを地図にしたくない代わりに、衛星で交通を表示したいとします。
URLのlayer = tとt = hフィールドに注目してください。 layer = tはトラフィック層、t = hはハイブリッドマップを意味します。 tは、ノーマルマップの場合はm、衛星の場合はk、地形の場合はpに設定することもできます。 zはズームレベルで、1から20まで変更することができます。上記のURLは7に設定されています。これらのURLを最終ページに貼り付けるだけで、高度にカスタマイズされたGoogleマップあなたのサイトの指示フォームを入手してください！
これに問題がある場合は、コメントを投稿して、私は助けようとします！お楽しみください！