close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Getting started with Pro Maps for Google™

Tutorial created by Kate Ford

Categories: Design Extender, Dreamweaver, PHP

rating

Pro Maps for Google™ wizard in Design Extender creates static and dynamic maps as well as driving directions to display on your website. In this self help guide, you will learn how to make maps and produce driving directions with a few clicks of your mouse.

arrow downWhat do you need to start?

  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.

arrow downOpen Pro Maps for Google™ wizard

  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.

arrow downCreate and enter Google API key

  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.

arrow downEnter static addresses

  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.

arrow downEnter dynamic addresses (optional)

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.

arrow downCustomize address markers

  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.

arrow downSpecify map options

  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.

arrow downCreate driving directions (optional)

  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.

arrow downPreview the completed map

  1. Save your page (Ctrl or Cmd + S).

  2. Go to File > Preview in Browser and select your preferred browser.

arrow downEdit the map after completion

  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.

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

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.