Inserting App Connect Google Maps on Your Page

Click on your page where you'd like to insert the map (1). Add a new component (2). Open the display menu(3) and select Google Maps (4).

Add an API key. Click the info icon which will take you to Google's API keys page. Follow the instructions there and get your key (1). Paste the API key using the paste button (2). You can select one of the map themes included (3). We will just use the default one. Setup map's width, and height. We leave the default values here (4-5). Select the map type. We choose hybrid map (6). Set the default zoom level. We enter 12. A zoom level of 12 is good for showing parts of a big city (7). Select whether to show traffic, transit or bicycling layers on the map (8). 

Enable the navigation and control options, whichever you need (1). Now, as we are done customizing the map's navigation and appearance options. Setup the location where the map should be centered on. This can be an address or geo coordinates (2). We center the map on Los Angeles, California. 

Add some pins to it. Right click the google maps component in app connect tree (1). Add a marker (2).

Markers can be added as address(1) or by using their geo coordinates (2). We entered an address (1). You can add a title for this marker. The title will appear when hovering the marker (3).   

You can add more markers by right clicking the google maps component(1) and selecting marker (2).

Setup the location and optionally a title for the new marker (1-3). You can customize the marker type for each of the markers on the map (4). 

You can still customize the marker type for your other markers on the map (1-2). You can see the changes immediately in Dreamweaver. 

And we are done!

That's how easy it is to insert app connect google maps on your page and setup its basic options.