Create map and driving directions

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).