Add a Google Map to a PageBuilder Page

After you have enabled Google Maps, you can insert a map component in PageBuilder. Although you can only embed one Google Map on a page, you can enter several locations on a single map. You can configure the following display options for a map:

• Display size (the default is 300x300 pixels)

• Remove the pan and zoom control or make the tool larger

• Add a scale, provide an option to access the satellite view, and enable map viewers to collapse an overview map.

• Configure the location details such as a full street address or simply the city or state name.

Note: The map component can not be edited after it has been saved.

Insert and configure the Google Map component in Pagebuilder:

1. In the Pagebuilder WYSIWYG Editor window, position your cursor at the spot where the map will be located.

2. From the Components drop-down list, click Google Map from the Extensions group. The Embedded Component Selector for Google Map opens.

3. For Map Pixel Width and Map Pixel Height, leave the set pixel size or change it to new dimensions. The default 300 pixels by 300 pixels is roughly 3-inch by 3-inch square.

4. For Initial Map Zoom Level, leave the -1 setting to make the map automatically fit in the space provided at a comfortable view.

5. For Zoom Control:

   • Leave the default Small pan and zoom control setting to offer the panning control tool in the top left corner of the map so the person viewing the map can move to other locations on the map by smaller increments and change the Zoom settings as appropriate.

   • Or, select the Large pan and zoom control setting to offer the panning control tool in the top left corner of the map so the person viewing the map can move to other locations on the map by large increments and change the Zoom settings as appropriate.

   • Or, select the Small zoom control setting to offer only the zoom controls that are typically used in the small map blowup windows for displaying driving directions steps on Google Maps.

6. In Optional Controls, select the:

   • Map scale control option to add a scale (for example, inches=miles) to the map.

   • Map type toggle control option to add the buttons for switching between the drawn map and a Satellite map.

   • Collapsible overview map toggle control option to add the ability to collapse the overview map in the corner of the map

7. In the Map Locations:

   • For Address, enter the location being mapped. You can enter simply a city or state or enter a detailed full street address (with number and name) along with the city and state.

   • For Display Title, enter the title to display for this location in the text area balloon.

   • For Description, enter information to display in the text area balloon to the person who clicks this location on the map.

   • For Color, click the color for the location marker on the map.

8. To add another location, click the Add More Locations button and repeat the Map Locations steps above in the new Address section that displays.

   Note: (Note that you can add several locations to this map by repeating this step.

9. When you are finished adding locations, click Insert. The Google Map displays in the WYSIWYG Editor window as a solid pixel box of the dimensions specified above (300 x 300 by default).

10. To view the map, click the Preview button. The map displays in a pop-up browser window.

11. Confirm that the map shows any locations you have entered correctly.

    Note: To correct a typographical error in the address, click the Source View button and carefully make your correction in the HTML code. For other errors, you may need to delete this component and start with Step 2 again.