GPS Advisor

How to add a Google map to your web page
As Google continues its steady progress towards domination of all things Internet-based, a clutch of useful tools is filtering down to Web designers.
Jason Whittaker (PC Advisor (UK)) 13/03/2008 16:10:00

Additional Resources

Newsletter Subscription

Sign up for our Good Gear Guide newsletters!
Each day the GearDaily Newsletter covers the latest from the last week in a specific category. Monday is "Computing, Small Office and Home Office", Tuesday is "On the Move", Wednesday is "Digital Cameras, Video and Imaging", Thursday is "Mobile Phones and Communications" and Friday is "Home Entertainment".
See the latest products and comparison prices added to GearShop each week.
The GoodGearGuide portfolio of services is rapidly expanding. By joining this list you will be pre-registered for any new email services we launch so you won't miss out on any of our independent product guidance and purchasing information. You will be automatically subscribed and receive the new service(s) but dont worry, should you wish to unsubscribe you can do so with only one click.

Step 3

3. Copy the sample code into a blank document and you'll see that most of the important information is contained between the tags < head > and < /head > (without the spaces), with a layer to contain the map in the body of the page. This creates a very basic document with a map that can be dragged around onscreen.

copy sample

Step 4

4. If you're familiar with hand coding, study the first example given at click here. This provides information for fine-tuning your map in any number of ways. However, if you simply want to make a few tweaks to customise your map, continue with the steps outlined here.

fine-tuning

Step 5

5. The first thing you'll want to do is to change the start location for your map. Locate the entry map.setCenter in the provided sample code and simply change the co-ordinates after GLatLng to match your desired starting point's latitude and longitude entries. You will now have a new central location for your page.

location

Step 6

6. Once you've created a basic page, load the code into a web-design application such as Dreamweaver. Remember to add a script to the < head > (without the spaces) section as well as instructions to load the map and a suitable layer in the body part of your HTML file, then modify your design as necessary.

load the code into a web-design application

Market Place

Good Gear Guide Member Login

 
close
Hot Deals
CareerOne