close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Create map and driving directions

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, Dreamweaver

rating

Design Extender allows you to create a web page that displays a map and driving directions. These same steps can be used with Pro Maps for Google.

arrow downWhat do you need to start?

  1. Dreamweaver CS3 or newer
  2. Design Extender installed and activated in Dreamweaver Alternatively, you can complete these tutorial steps with Pro Maps for Google installed and activated
  3. Dreamweaver dynamic site (PHP)

arrow downMap and driving directions set-up

Create a map on your website with driving directions from one location to another.

Step 1: Google API key

In Dreamweaver, navigate to the WebAssist button. Choose Insert Google Map in the drop down menu for directions to obtaining your Google API key. Copy (Ctrl or Cmd + C) and paste (Ctrl or Cmd + V) the API key into the appropriate box. Click Next.

Step 2: Destination address

To enter the destination address, click the Add button in the upper left corner. Then check Default destination and enter the destination address, for example McCarran International Airport. Click Next.

Step 3: Modify map

Now it's time to modify the map. To make changes to the Address Marker, select Google Traditional (pillow). Set your desired Color Scheme and leave default for Info Window setting. Click Next.

Step 4: Customize map

Customize the dimensions of the map by entering 250 for both width and height. Under Default Display Options, check Traffic. Click Next.

Step 5: Driving directions

To complete the driving directions, check the Include directions box. Then enter the start address, for example Stratosphere Hotel and Casino. The destination address was already completed in Step 2. Click Finish.

Step 6: Edit placeholders (a)

Go to your Dreamweaver page where you will see 2 placeholders, one for the map and the other for driving directions. To move the placeholders, go to the Design button, then simply click and drag.

Step 7: Edit placeholders (b)

Or you may prefer to move the placeholders side-by-side. This will require editing the style sheet.

  1. Click on the Code View button to locate the ID for the div tag containing the driving directions. Highlight and copy (Ctrl or Cmd + C) wagmp_directions_2 being careful not to include the quotation marks.

  2. In the CSS panel, click the New CSS Rule icon as highlighted below in yellow.

  3. In the new CSS dialog box, pick Advanced in the Selector Type. In Selector, type # followed by paste (Ctrl or Cmd + V). Next, define where you'd like to store the code, for example my_styles.css and click OK.

  4. In the CSS Rule Definition dialog, switch to Box under Category. For width, type in 250 pixels and right in Float. Click OK.

  5. Click the Design button to view the side-by-side placement.

Step 8: Complete map

If you are satisfied, save (Ctrl or Cmd + S) and preview in your browser (F12).

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

Justin Hood: 11 Years, 7 Months, 3 Days, 10 Hours, 50 Minutes ago

Nice tutorial!

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.