Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Adding google maps to your web page web design library

Adding google maps to your web page web design library


Adding Google Maps to a web page

Compatiable with Dreamweaver CS3, CS4, CS5 & CS5.

Google maps is a high quality & high value addition to a website. It's also quick and easy to get working.
1. Have your html page open in Dreamweaver (e.g. contactus.html).
2. In your browser go to: http://maps.google.com/
3. Type in your address in the search box

img

4. In the top right of your page choose the 'Link' button

img

5. Click the words: 'Customise and preview embedded map'

img

6. Choose the 'Custom' Size option.
7. Choose a size appropriate to your page e.g. 590x350px

img

8. Select all & copy the code from the last cell 'Copy and paste this HTML...'
9. Go back into Dreamweaver (making sure your HTML page is open).
10. Have you cursor flashing in the text area where you want the map to appear.
11. Switch to Code View

img

12. Edit Paste
13. File > Preview in Browser > Firefox

img

Note: it will take a few moments for the map to appear. You must have a working internet connection for this to work.



About the Author:

Daniel Scott Hi there! My name is Dan. I have lots of short courses like this I want to share online. I really want to promote our short courses locally (NZ) and I think if we give loads of fresh stuff away for free we'll see an increase in traffic. Yours is the first site I've submitted anything too. I'd like to know if you'd prefer unique stuff that's not on our blog first or if you don't care if it appears on our site first. Any advice would be grateful. I've used your site for a long time now and I ...
Author's URL: Daniel Scott
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com


Like us to: