Google has a feature called “Directions” that can be used to get you to your event location without using their website. If you have your own website or blog, you can use Directions to automatically get you to the event location.
The easiest way to embed Google Maps onto your webpage is to use the embed code generated by Google Maps. This is a simple way to get the map up on your webpage, but it isn’t very customizable or dynamic. The second way is more technical, but it allows you more control over how the map looks and behaves. I’ll mention both methods below. ..
Embed Google Map
Once you are in the “Maps” menu, click on “Embed.” You will now be able to paste in the embed code for the map you want to use. For example, if you wanted to embed a map of Boston, Massachusetts, you would type in: http://maps.google.com/maps?q=boston+ma&oe=UTF-8&hl=en&um=1&ie=UTF-8&zoom=14&btnI ..
Click on the Embed map tab and then click on the Share or share button. Here you can pick a size for your map and then copy the iframe code and paste it onto any webpage you like.
The second method below is more versatile because it allows the user to type in any starting address and it will generate a map from that address to a destination address of their choosing.
Create Google Maps Form
To get directions from your location to my house, type in the address below.
This form can be easily created 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 put 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.
To create a get directions box, 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 have gone ahead and pasted the entire URL below just to show you what it looks like.
Google has changed the URL structure for its Maps service, making it more complicated to use. However, 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. ..
https://maps.google.com/maps?q=New+Orleans+City+Houston&ll=29.8701,-95.3163&oe=UTF-8
Houston, TX is closer to New Orleans, LA than Dallas, TX. ..
To create a simple form with two fields, one for the starting address and one for the destination address, we can use the Google Maps URL builder.
If you want people to just type in their address and get directions to your place, you’ll need to hide the second field and have the destination address already set. ..
The form allows you to enter your starting address. The input is hidden, so you have to type it in manually. The submit button will take you to the Google Maps website where you can get directions.
The second line starts out with the phrase “Then we have a text box for the starting address.” This text box will contain the starting address for our map. Google Maps will then send the data to that address.
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: If someone wants to get directions to a specific address, they can use this text box to input their information. The Submit button will take them to a page that will show them how to get there.
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. You can change the zoom level, the panning angle, and how quickly the map updates.
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!
I have some issues with this, I’ll post a comment and I’ll try to help! Enjoy!