While there are so many mapping applications and services that will take you from point A to point B, Google Maps is the ultimate king of maps. I use it on my computer, tablet and 90% of the time on my smartphone. It has the best data, many navigation and route options, and useful features such as street view, walking, cycling, and public transportation information.
But what if you need to use the map or directions outside of the Google website? Let’s say you have your own wedding website or personal blog, and guests can visit your site, enter the address they will be coming from, and automatically get directions to the event location!
Well, there are several ways to achieve this. The easiest way is to simply embed the map into your webpage using the inline code generated by Google Maps. The second way is a little more technical, but more customizable and dynamic. I will mention both methods below.
Embed Google Map
If you only want to display routes from one location to another, the easiest way is to embed whatever map you are viewing using inline code. First, set up any directions in Google Maps and then click the gear icon in the lower right corner of the page.
Tap Share or Embed Map, and then tap the Embed Map tab. Here you can select the size of the map and then copy the iframe code and drag it to any web page you like.
The only drawback of this method is that the user only sees the static map. In the second method below, you can create a form where the user can enter any starting address and it will generate a map from that address to the destination address of your choice.
Create a Google Maps template
To illustrate what I mean by the second method, enter a US address in the box below to get directions from your location to my home:
Cool, huh? You can easily create this small form on any website, blog, or anywhere you can insert HTML! It’s also great for small business websites because you can put it on your contact page and people can get directions quickly, instead of copying your address, opening a new window, and then typing in their starting address.
So how do we create this modified get directions window? Well, first we need to get the correct syntax for the URL that Google uses for routes. Luckily, we can figure this out by tracing a route between the two and then simply copying the URL from the address bar. You can also click on the tiny gear icon in the lower right corner of the page and choose Share or Embed Map.
Sharing The Links tab will contain the URL, which is the same URL in your browser’s address bar. I have pasted the entire url below 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
Hurray! It’s quite long! There is a lot of everything, mostly meaningless! Google Maps URL parameters used to be very simple and straightforward, but the new URL structure is quite complex. Fortunately, you can still use the old options and Google will automatically convert them to the newer version. To see what I mean, follow the link below.
http://maps.google.com/maps?saddr=start&daddr=end
Come on, try it. Enter the quoted address for the start and end address and paste the URL into your browser! I replaced the start with my hometown New Orleans and ended up in Houston, Texas, so this is what my Google Maps URLs looks like:
http://maps.google.com / maps? saddr = â€new orleans, la†& daddr = â€houston, txâ€
It works! However, as you can see, Google Maps converts the links to something much more complex after the map is fully loaded. So now that we have a sensible URL that we can pass to Google Maps, we need to create a simple form with two fields, one for the start address and the other for the destination.
If you want people to just enter their address and get directions to you, then we want the second field to be hidden and already set to the destination address.
Check out the code above. The first line starts with a form and says that when the submit button is clicked, the data should be submitted to maps.google.com/maps. Target = blank means that we want the result to open in a new window. We then have an empty text box for the start address.
The second text box is hidden and the value is the desired destination. Finally, there is a submit button titled “Get Directions”. Now when someone enters their address, they get this:
You can customize routes and map with a few advanced options. For example, let’s say you don’t want maps to be displayed by default, but instead want it to be satellite and show traffic.
http: //maps.google.com/maps? saddr =% 22nash + orleans, + la% 22 & daddr =% 22howston, + tx% 22 & u = utf8 & t = x & z = 7 & laer = t
Notice the layer = t and t = h fields in the url. layer = t for 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 is set to 7. Just attach them to your final url and you now have a custom Google Maps Get Directions form on your site. !
If you have any problems, please leave a comment and I’ll try to help! Enjoy!
–
Comment on “Add Google Maps Driving Directions to Your Website”