尽管有如此多的地图应用程序和服务(apps and services)可以将您从 A 点带到 B 点，但最终的地图之王还是Google Maps。我在我的电脑、平板电脑和 90% 的时间在我的智能手机上使用它。它拥有最好的数据、最多的导航和路线选择以及街景和步行(Street View and walking)、骑自行车和公共交通信息(biking and mass transit info)等酷炫功能。
但是，如果您需要使用Google 网站之外的地图或路线怎么办？(map or directions)假设(Suppose)您有自己的婚礼网站(wedding website)或个人博客，客人(blog and guests) 可以访问您的网站，输入他们将来自的地址并自动获取前往活动地点(event location)的路线！
好吧，有几种方法可以实现这一目标。最简单的方法是使用Google Maps生成的嵌入代码将地图嵌入到您的网页中。第二种方式更具技术性，但更具可定制性和动态性。我将在下面提到这两种方法。
嵌入谷歌地图
如果您只想显示从一个位置到另一个位置的路线，最简单的做法是使用嵌入代码嵌入您正在查看的任何地图。首先(First)，继续在谷歌地图(Google Maps)中设置你想要的任何方向，然后点击页面右下角的齿轮图标。
单击共享或嵌入地图( Share or embed map)，然后单击嵌入地图(Embed map)选项卡。在这里，您可以为地图选择尺寸，然后复制iframe 代码并将其拖放(iframe code and drop)到您喜欢的任何网页上。
此方法的唯一缺点是用户只能看到静态地图。在下面的第二种方法中，您可以创建一个表单，用户可以在其中输入任何起始地址，它将生成从该地址到您选择的目标地址的映射。(destination address)
创建 Google 地图表单
为了说明第二种方法的含义，请继续在下面的框中输入美国地址(US address)，以获取从您所在位置到我家的路线：
酷吧(Cool huh)？您可以在任何网站、博客或任何可以放入HTML 代码(HTML code)的地方轻松创建这个小表单！这对于小型企业网站(business web)也非常有用，因为您可以将其放在您的联系页面上，人们(contact page and people)可以快速获取路线，而不必复制您的地址，打开一个新窗口，然后输入他们的起始地址(starting address)。
那么我们如何去创建这个修改后的获取方向框呢？首先(Well)，我们需要为Google用于路线的URL获取正确的语法。幸运的是，我们可以通过获取两个地方之间的路线然后从地址栏中复制(address bar)URL来解决这个问题。您也可以单击页面右下角的小齿轮图标，然后选择共享或嵌入地图(Share or embed map)。
共享链接(Share link)选项卡将包含URL，它与浏览器地址栏中(browser address bar)的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 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 Maps的合理(Google Maps)URL，我们需要创建一个包含两个字段的简单表单，一个用于起始地址(starting address)，一个用于目标地址(destination address)。
如果您希望人们只需输入他们的地址并获取到您所在位置的路线，那么我们将希望隐藏第二个字段并已将其设置为目标地址(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)，它是空白的。
第二个文本框(text box)是隐藏的，值是我们想要的目标地址。(destination address)最后，有一个标题为“Get Directions”的提交按钮。现在，当有人输入他们的地址时，他们会得到这个：
您可以使用一些额外的参数自定义方向和地图。例如，假设您不希望默认视图(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。只需(Just)将它们附加到您的最终URL，您现在就可以在您的网站上获得高度定制的Google 地图获取路线表格(Google Maps Get Directions form)！
对此有任何问题，发表评论，我会尽力提供帮助！享受！
Add Google Maps Driving Directions to Your Website
Even though there are so many mapping apps and services out there to get you from point A to point B, the definitive king of maps is Goоgle Mapѕ. I υse it 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, bikіng 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!
