X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Inserting a Google Map into an AP Div in Dreamweaver CS5

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.


  

David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

Aug 15, 2011
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.
Sep 02, 2011
David Smith
You are absolutely right Skye, thank-you
Aug 08, 2012
Dear author,

I want to express my sincere thanks of this useful article.
Aug 27, 2012
David Smith
Thank-you
Apr 04, 2013
elisabetta
grazie
Apr 05, 2013
David Smith
Prego
Jun 18, 2013
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.
Aug 15, 2013
Dennis
Thank you so much. I have bookmarked your page for future reference. Valuable info!
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link