• Aug 15, 2011

• Inserting a Google Map into an AP Div in Dreamweaver CS5

• by David Smith in Dreamweaver

• Genre: Web
• Level: Intermediate
• Time to Complete: 15-30 minutes
• 2 comments — Join Discussion

We've all no doubt utilised Google's excellent Map facility to search out locations. Wouldn't it be great to be able to use them to help people find your locations, too? What's more, wouldn't it be even greater if to do that they didn't have to leave the comfort of your web page? It really is very simple to do in Dreamweaver.

Step 1 - Preparing the Groundwork

In Dreamweaver I'm going to create a new page for this: File > New Document (or press Command-N) and chose a basic HTML layout. You may have a page already created that you want to use instead.

New Page.

On the page I'm going to start by creating an AP Div to hold my map in the page. First make sure that your page view is set to Designer so you can see the actual page.

Design View Button.

From the Insert Panel choose Common as the category and select 'Draw AP Div'.

Draw AP Div button.

You cursor will now show a crosshair; with the crosshair draw a box somewhere on the page. Try to make it the size you'd like to see your map displayed. It can be tweaked later. 

AP Element on screen.

This box will contain the map. The reason I have created this box for the map is the ease with which I can modify it. Grabbing the small white square in the top left corner of the box allows me to reposition the box anywhere.

In the Properties panel the Div's properties will be displayed. Change the ID to 'MapBox' and set the W & H values to 300px.

Properties Panel.

Step 2 - Inserting the Map

Use your web browser to search a location using Google Maps. I've searched out the Training Office I use in Glasgow.

Glasgow Google Map.

On the Google Map there are some small icons at the top right corner. Clicking on the one called Link will open it.

Google Map link button.

Select all the code inside the box marked "Paste HTML to embed in website" and copy it.

Tip: Click 3 times in quick succession on the code to select it all, then copy (Command-C) to make sure you don't miss any.

Google Map Insert Code.

This code will enable the re-displaying of this page with the fully interactive Google Map of your location inside the AP Div using an iframe (insert frame).

To insert this code into our AP Div MapBox in Dreamweaver, paste it into the Code View between the <div> and </div> tags.

Tip: The easiest way to make sure that the code is inserted into the correct location is to switch to Design View and click inside the MapBox AP Div on the page so that the flashing cursor sits inside the <div>.

Code View Cursor.

Switch to Split View to see both the design and the code. The cursor will now be flashing between the correct open and closed div tags and you can paste the code (Command-V).

Step 3 - Previewing

Switch on the Live View in Dreamweaver and the interactive map will appear on the page inside your MapBox Div.

Map Page.

You can always use the Properties panel to resize the MapBox Div if required, just make sure you switch the Live View off to enable the parameters.

If you fancy a harder challenge then you can also use Cascading Style Sheets (CSS) to format the MapBox with borders, backgrounds etc., but that's for another article.

Learn more about Dreamweaver here.