While there are plenty of mapping apps and services out there to get you from point A to point B, the definitive map king is Google Maps. I use it on computers, tablets and 90% of the time on my smartphone. It has the best data, most navigation and routing options, and interesting features like Street View and Walking, Bicycling, and bulk transit information.
But what if you need to use maps or directions outside of Google? Suppose you have your own wedding website or a personal blog and visitors can access your website, enter the address they will go to and automatically get directions to the event venue!
Yes, there are a few ways you can accomplish this. The easiest way is to simply embed the map into your website using the embed code generated by Google Maps. The second way is a bit technical, but more customizable and dynamic. I will mention both methods below.
Embed Google Map
If you just want to show directions from one location to another, the easiest thing is to embed any map you are viewing using the embed code. First, go ahead and set up any direction you want in Google Maps and then click the gear icon at the bottom right of the page.
Click on Share or embed the map and then click Embedded map navigation. Here, you can choose the size for your map and then copy the iframe code and drop it on any site you want.
The only downside of this method is that users only see a static map. In the second method below, you can create a form whereby users can enter any starting address and it will create a map from that address to the destination you choose.
Create a Google Maps form
To illustrate my idea of the second method, go ahead and enter your US address in the box below to get directions from your location to my home:
Cool? You can easily create this small form on any website, blog or anywhere you can put some HTML code! This is also great for small business websites because you can put it on your contact page and people can get directions quickly, instead of having to copy your address, open a new window. and then enter their start address.
So how do we go about creating this revision guide box? First, we will need to have the exact syntax for the URL that Google uses for directions. Fortunately, we can find that out by getting directions between the two locations and then simply copying the URL from the address bar. You can also click the little gear icon in the lower right corner of the page and select Share or embed the map.
The Share link tab will contain the URL, which is the same URL in your browser's address bar. I went 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 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892
Sorry! That is quite long! There are many things in there, most of which don't make sense! The Google Maps URL parameters are simple and easy to use, but the new URL structure is complex. Thankfully, you can still use the old parameters and Google will automatically convert them into the new version. 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 an address in quotes for the start and end addresses and paste the URL into your browser! I replaced starting with my city of New Orleans and ending with Houston, TX, so this is my directions URL on Google Maps that looks like this:
http://maps.google.com/maps?saddr= Manhnew orleans, la Scarf & daddr = houston towels, tx
It works! However, as you can see, Google Maps converts the links into something much more complicated when the map is fully loaded. Ok, so now that we have a healthy URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the start address and one for the destination address.
If you want people to simply enter their address and get directions to your location, then we'll want the second field hidden and set to the destination address.
Check out the code above. The first line starts from the form and says that when the submit button is clicked, the data is sent to maps.google.com/maps. The goal = empty means we want the result to open in a new window. Then we have a text box for the start address, blank.
The second text box is hidden and the value is the desired destination address. Finally, there is a submit button with the subject Get Receive Instructions. Now when someone types their address, they will get this:
You can customize the directions and the map even more with a few additional parameters. For example, suppose you say that you don't want the default view to be the map, but instead, it wants Satellite And show Traffic.
Note class = t and t = h fields in the URL. layer = t is for traffic layer and t = h means hybrid map! t can also be set to m for normal maps, k for satellite and p for terrain. z is the zoom level, and you can change it from 1 to 20. In the URL above, it's set to 7. Just handle the URLs on your final URL, and now you have the Get Google Map form Highly customizable maps on your site!
Have any problems with this, post a comment and I will try to help! Enjoy!
0 Comments