All Articles Dreamweaver
Inserting a Google Map into an AP Div in Dreamweaver CS5
David Smith on Mon, August 15th 8 comments
Integrating GoogleMaps in to your website is all the rage in the web design world. It's also quite straightforward to do in Dreamweaver. David Smith, Authorised Adobe Trainer, shows you how.

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.

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.

Design View Button.


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

Draw AP Div button.

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.

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.

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.

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.

Goole map link button.

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.

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.

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.

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.


  

Comments (8)

You must be logged in to comment.

  • Dennis
    Thank you so much. I have bookmarked your page for future reference. Valuable info!
    • 5 years ago
    • By: Dennis
    Reply
  • Skye
    For non Dreamweaver users, just a note that an AP Div is just a div with absolute positioning (AP). If you look at the source code image you can see the absolute positioning style that Dreamweaver has applied to the div.
    • 7 years ago
    • By: Skye
    Reply
  • David Smith
    You are absolutely right Skye, thank-you
    • 7 years ago
    • By: David Smith
    Reply
  • Dear author, I want to express my sincere thanks of this useful article.
    • 6 years ago
    • By:
    Reply
  • David Smith
    Thank-you
    • 6 years ago
    • By: David Smith
    Reply
  • elisabetta
    grazie
    • 6 years ago
    • By: elisabetta
    Reply
  • David Smith
    Prego
    • 6 years ago
    • By: David Smith
  • Sandra
    Hello there, I need some help. I want to create a structure with 4 frames: Left, Top, Main and Right. In the top frame I have a Banner, in a table, and I want to insert a Spry Menu Bar. The problem is, if I want in that Spry a Vertical Menu it doesn't shows up in the main frame. How do I make it visible? Best regards.
    • 5 years ago
    • By: Sandra
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: