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. One such service is a beta version of Google Maps’ programming interface.

Put your business on the map

Email this to a friend

Characters remaining:

What is A + B?

As Google continues its steady progress towards domination of all things internet-based, a clutch of useful tools is filtering down to web designers. One such service is a beta version of Google Maps’ programming interface.

While many of us use Google Maps to find locations or to browse satellite imagery, it’s an open secret that you can also add those maps to your own site.

This is one of the many projects that makes use of a Google application programming interface (API) to provide services to websites. Web designers can modify the map to display certain information; it’s possible that their mashup could even be loaded on to Google Maps.

As with Google’s other APIs, this is free to use – with certain restrictions. If you want to use a map commercially or on a private website, sign up for a 30-day trial of Google Maps Enterprise. Enterprise allows maps to be viewed behind a firewall or with a paid-for subscription login; it also provides extra features such as customer relations and marketing support.

With the free version, users can localise a map and modify it to respond to zooms and pans to find other places. Information windows can be added to provide visitors with updates, or markers and route lines can indicate positions
or directions.

With some further research you could soon be performing such advanced functions as geocoding, adding a Google-powered local search engine, creating custom controls and adding driving instructions to your website. For the time being, however, if all you want is a simple map with straightforward instructions, you can achieve this in half an hour or so.

1. To get started using Google Maps, you'll need to sign up for an API key. This key is valid for a single directory on your server; you can use it to embed a Google Map on any page at that domain, with no limit on the number of page views per day.

Step 1

2. Before you can get this key, you’ll need to log into your existing Google Account (or create one). Once logged in, click ‘Sign up for a Google Maps API key’. Enter your domain name and click ‘Generate API key’. This will create the key along with some code that can be pasted into a hypertext markup language (HTML) file.

Step 2

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.

Step 3

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.

Step 4

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.

Step 5

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.