How to Embed Driving Directions in a Web Page

A map on your site can help site visitors navigate the traffic maze.

Google has free tools you can use to enhance your website. One of them, the Google Driving Directions widget, gives your site visitors the ability to view driving directions between two locations. There are many uses for this technology. For instance, if you have a website that advertises your business, a site visitor could map out a route to your location right from your Web page. Using Google's widget generator, you can generate the code you need to embed driving directions on your website.

Instructions

1. Visit the Google Maps website and click "Add gadget to your site." A new page opens and displays the driving directions widget. This widget contains two text boxes. Users enter their starting locations in the "From" text box and their ending destinations in the "To" text box.

2. Enter a title for the widget, such as "Directions to My Business," in the "Title" text box. If you want to resize the widget, enter values for width and height in the "Width" and "Height" text boxes. Those dimensions are in pixels. For example, to make the widget 100 pixels wide and 200 pixels tall, enter 100 in their "Width" text box and 200 in the "Height" text box.

3. Click one of the colors in the "Border" section to set the widget's border color. If your Web page has a particular color scheme, consider choosing a color that works well with that scheme.

4. Locate the "Gadget Settings" section on the right side of the page. Enter a default origin in the "Origin" text box if you want a default value to appear in the widget. Otherwise, leave the text box blank. You can also enter a default destination in the "Destination" text box to set a default destination. If you enter values in either of these text boxes, be sure to separate the address, city and state using commas as shown in the example below:

   102 Main, Denver, Colorado

5. Click the "Default Directions Type" drop-down box and select "By Car" or "Bicyling."

6. Click the "Language" drop-down box and choose a language. You can use a language other than Englis, or leave the default "English" value in the drop-down box.

7. Click "Preview Changes" to preview the widget.

8. Click "Get the Code." The site will display the HTML code you need to embed on your Web page. Click anywhere in the text box that contains that code, then press "Ctrl" + "A" to select all the code. Press "Ctrl" + "V" to copy it to the Windows clipboard.

9. Paste this code in your Web page's HTML code at the location where you want the driving directions widget to appear. When your site visitors enter "From" and "To" locations in the widget, a map displaying driving directions opens.

Tips & Warnings

• You can also resize the widget when designing it by dragging its bottom right edge using the mouse. Doing so will update the widget's height and width values automatically.

References

• Google Code: API Family

Resources

• Google Maps: Driving Directions Gadget