ポイントAからポイントBに移動するためのマッピングアプリやサービス(apps and services)はたくさんありますが、マップの決定的な王者はGoogleマップ(Google Maps)です。私はそれを自分のコンピューター、タブレット、そして90％の時間スマートフォンで使用しています。最高のデータ、最も多くのナビゲーションとルーティングのオプション、ストリートビューやウォーキング(Street View and walking)、サイクリング、公共交通機関の情報など(biking and mass transit info)の優れた機能を備えています。
しかし、Googleのウェブサイトの外で地図や道順(map or directions)を使用する必要がある場合はどうでしょうか。あなたがあなた自身の結婚式のウェブサイト(wedding website)または個人的なブログを持っていて、ゲスト(blog and guests) があなたのサイトを訪問し、彼らが来るアドレスを入力し、そして自動的にイベントの場所への道順を得ることができる(event location)と仮定し(Suppose)てください！
さて、これを達成するためにあなたが行くことができるいくつかの方法があります。最も簡単な方法は、Googleマップ(Google Maps)で生成された埋め込みコードを使用して地図をウェブページに埋め込むことです。2番目の方法は、もう少し技術的ですが、よりカスタマイズ可能で動的です。以下に両方の方法について説明します。
Googleマップを埋め込む
ある場所から別の場所への道順のみを表示したい場合、最も簡単な方法は、埋め込みコードを使用して、表示している地図を埋め込むことです。まず、 (First)Googleマップ(Google Maps)で目的の方向を設定してから、ページの右下にある歯車のアイコンをクリックします。
[共有]または( Share or embed map)[マップの埋め込み]をクリックしてから、[マップの埋め込み(Embed map)]タブをクリックします。ここで、マップのサイズを選択し、iframeコードを(iframe code and drop)コピーして、好きなWebページにドロップできます。
この方法の唯一の欠点は、ユーザーが静的な地図を見るだけであるということです。以下の2番目の方法では、ユーザーが任意の開始アドレスを入力できるフォームを作成できます。フォームは、そのアドレスから選択した宛先アドレス(destination address)へのマップを生成します。
Googleマップフォームを作成する
2番目の方法の意味を説明するために、下のボックスに米国の住所(US address)を入力して、現在地から私の家までの道順を取得します。
かっこいい(Cool huh)？この小さなフォームは、任意のWebサイト、ブログ、またはHTMLコード(HTML code)を挿入できる場所ならどこでも簡単に作成できます。これは、中小企業のWeb(business web)サイトにも最適です。連絡先ページに表示して、住所をコピーして新しいウィンドウを開き、(contact page and people)開始住所(starting address)を入力する必要がなく、ユーザーが簡単に道順を取得できるためです。
では、この変更されたルート案内ボックスを作成するにはどうすればよいでしょうか。まず(Well)、Googleがルート案内に使用する(Google)URLの正しい構文を取得する必要があります。幸い、2つの場所の間の道順を取得し、アドレスバー(address bar)からURLをコピーするだけで、それを理解できます。ページの右下にある小さな歯車のアイコンをクリックして、[共有]または[地図を埋め込む(Share or embed map)]を選択することもできます。
[共有]リンク(Share link)タブには、ブラウザのアドレスバー(browser address bar)と同じURLであるURLが含まれます。私は先に進んで、それがどのように見えるかを示すために、以下のURL全体を貼り付けました。(URL below)
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
うわぁ！それはかなり長いです！そこにはたくさんのものがありますが、そのほとんどは意味がありません！GoogleマップのURL(Google Maps URL)パラメータは、以前は非常に単純で簡単でしたが、新しいURL構造(URL structure)は非常に複雑です。ありがたいことに、古いパラメータを引き続き使用でき、Googleはそれらを新しいバージョンに自動的に変換します。私が何を意味するのかを知るには、以下のリンクをチェックしてください。
http://maps.google.com/maps?saddr=start&daddr=end
さあ、試してみてください。開始アドレスと終了アドレスを引用符で囲んでアドレスを入力し、URLをブラウザに貼り付けます。(address and paste)最初は故郷の(home city)ニューオーリンズ(New Orleans)で、最後はテキサス州ヒューストン(Houston)に置き換えたので、Googleマップ(Google Maps)のルートURLは次のようになります。
http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
できます！ただし、ご覧のとおり、マップが完全に読み込まれると、Googleマップ(Google Maps)はリンクをはるかに複雑なものに変換します。これで、 Googleマップ(Google Maps)に渡すことができる適切なURLができたので、(URL)開始アドレス(starting address)用と宛先アドレス(destination address)用の2つのフィールドを持つ単純なフォームを作成する必要があります。
住所を入力してあなたの場所への道順を取得するだけの場合は、2番目のフィールドを非表示にして、宛先アドレス(destination address)に設定しておく必要があります。
<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>
上記のコードを確認してください。最初の行はフォームから始まり、送信ボタン(submit button)がクリックされたときにデータをmaps.google.com/mapsに送信する必要があることを示しています。target=blankは、結果を新しいウィンドウで開くことを意味します。次に、開始アドレスの(starting address)テキストボックス(text box)がありますが、これは空白です。
2番目のテキストボックス(text box)は非表示になっており、値は目的の宛先アドレス(destination address)です。最後に、「GetDirections」というタイトルの送信ボタンがあります。これで、誰かが自分のアドレスを入力すると、次のようになります。
いくつかの追加パラメータを使用して、方向をカスタマイズし、さらにマップすることができます。たとえば、デフォルトのビュー(default view)をマップにしたくないが、代わりにサテライトにして(Satellite)トラフィック(Traffic)を表示したいとします。
http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
URLの(URL)layer=tおよび t=hフィールドに注意してください。layer = tはtraffic layer and t=h meansハイブリッドマップを意味します。tは、法線マップの場合はm、衛星の 場合はk、地形の場合はpに設定することもできます。zはズームレベル(zoom level)で、1から20に変更できます。上記のURLでは、7に設定されています。最終的なURLに貼り付ける(URL)だけ(Just)で、高度にカスタマイズされたGoogleマップのルート案内フォーム(Google Maps Get Directions form)がサイトに表示されます。 ！！
これに関して何か問題があります、コメントを投稿してください、そして私は助けようとします！楽しみ！
Add Google Maps Driving Directions to Your Website
Evеn though there are so many mapping apps and services out there to get you from рoint A to point B, the definitive king of maps is Google Maps. I use іt on my computer, tablet and 90% of the time on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Street View and walking, biking and mass transit info.
But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!
Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.
Embed Google Map
If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.
Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.
The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.
Create Google Maps Form
To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:
Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.
So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.
The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.
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! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.
http://maps.google.com/maps?saddr=start&daddr=end
Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:
http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.
If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.
<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>
Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.
The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:
You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.
http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!
Have any issues with this, post a comment and I’ll try to help! Enjoy!
