Getting started with Pro Maps for Google™

1. Dreamweaver CS3 or higher
   
2. Design Extender (alternatively, Pro Maps for Google™) installed and activated in Dreamweaver
   
3. A site defined in Dreamweaver and a web page to contain your map.

Optional for displaying addresses from your database:

1. Set up your Dreamweaver site as a dynamic site.
   If you need assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
   
2. Create a PHP web page to contain your map.
   
3. Create a connection in Dreamweaver to a database that contains columns for each address field. For example, my connection is connBlueSkyMusic.
   If you need assistance, view this tutorial: Create a PHP database connection.
   
4. Make sure you have a recordset on your page that will pull the addresses from your database. For example, I created a recordset named Rs_address and chose the visitors table in my database. I selected all columns in my database but I could have selected only a subset.
   
   
   

1. From the Files panel, choose your Dreamweaver-defined site. Open a file previously saved in the site or if you're working in a new site, create a dynamic page and save it.
   
   
2. Choose WebAssist > Insert Google Map.
   
   
3. The first page of the Pro Maps for Google™ wizard will appear.
   
   
   

1. To obtain a Google API key which is required for your map to display, you must first have a Google account and be logged in.
   
   
2. To create your key, go to the APIs Console by clicking the link within the Pro Maps for Google™ wizard.
   
   
3. In the left-hand menu, choose Services and activate Google Maps API v3 service.
   
   
4. Copy (Ctrl or Cmd + C) the key and paste (Ctrl or Cmd + V) it into the wizard's API Key field.
   
   
5. Alternately, you may use the following API key if localhost is your testing server:
   ABQIAAAAvZMU4-DFRYtw1UlTj_zc6hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQcT1h-VA8wQL5JBdsM5JWeJpukvw
   However, to publish your page to a live server, you will need to create an API key for your domain.
   
   
   
   
   
6. Click Next.

1. To enter static addresses that will be displayed on your map, click the + icon.
   
   
2. Select the Default destination checkbox if you are creating driving directions.
   
   
3. From the Type menu list, choose Coordinates or Address.
   
   
4. For coordinates, enter the Latitude and Longitude coordinates.
   
   
5. For addresses, enter Street, City, State or Province, Zip or Postal code, and Country. Although not all fields may not be required, providing as much information as possible will render the best results. You can verify an address by entering the information at http://maps.google.com.
   
   
6. Click the plus icon to repeat this process or the remove icon to delete an address.
   
   
   
   
   
7. When you have finished entering static addresses, click Next.

Note: Skip this section if you do not want to display addresses from a database.

1. Click the plus icon to begin entering the first dynamic address.
   
   
2. Check Default destination address only if this address will be the default destination. The default destination is the location that has focus when the map initially loads. This can only be applied to one location.
   
   
3. Click Show multiple to display more than one address contained in the recordset. Choosing Show multiple will loop through the recordset to display all the address in that recordset. If this is unchecked, only the first address in the recordset will display.
   
   
4. Choose your recordset from the database menu list.
   
   
5. From the Type menu list, choose Address or Coordinates. In this tutorial, I am going to demonstrate adding two dynamic addresses.
   
   
6. Select the Street lightning bolt and choose the first Street column from your recordset.
   
   
7. Select the City lightning bolt and choose the City column from your recordset.
   
   
8. Select the State / Province lightning bolt and choose the State / Province column from your recordset.
   
   
9. Select the Zip / Postal code lightning bolt and choose the Zip / Postal code column from your recordset.
   
   
10. Select the Country lightning bolt and choose the Country column from your recordset.
    
    
    
    
    
11. Click Next when you are ready to continue.

1. From the Address marker menu list, choose the type of marker you like. Note the change in the preview window to see how your selection will appear.
   
   
2. Choose a color scheme for your marker.
   
   
3. Choose whether you want your information window to display the default information, or custom information. Choosing custom in the Info window menu allows you to enter any static or dynamic data that you may want to appear in the info window. This window can even include graphics if desired.
   
   
   
   
   
4. Click Next once you have specified your preferred settings.

1. Dimensions determine the size of your map.
   1. In Height and Width fields, enter the preferred size of your map using pixels as the measurement.
      
   2. Map dimensions are required.

2. The Controls section determines overlays.
   
   1. Map Type offers additional map display options.
      
   2. Zoom allows you to specify the type of zoom you would like to be available on your map.
      
   3. Inset will insert a graphic in the corner of your map to display an enlarged area of the region.
      
   4. You can also experiment with Street View, Pan, and Scale.

3. In Display Default Options, select the desired map type and zoom capability.
   
   1. Traffic displays Google's real-time color-coded traffic overlaid on the map in locations where available.

   
   

   
   
   
4. Preview your selections and click Next when you are satisfied.

1. Select the Include directions checkbox if you want written directions specific to your map. Enter a starting address for directions to the default location specified in step 2 of the wizard. If a recordset listing is selected as the default, the first address record returned will be treated as the default address.
   
   
2. Enter a static address, or choose the lightning bolt to select a dynamic address.
   
   
   
   
   
3. Click Finish and note the temporary placeholder image.
   
   
   

1. Save your page (Ctrl or Cmd + S).
   
   
2. Go to File > Preview in Browser and select your preferred browser.
   
   
   
   

1. Open your page in Dreamweaver and select the map in Design View.
   
   
2. Click Edit in the Property Inspector to re-enter the wizard and make changes.
   
   
   

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