Google Maps mashups let you map your own locations on an interactive Google Map. In this article, Google expert Michael Miller shows you how to program your own Google Maps mashup — and place the resulting custom map on your own website.

From the author of

From the author of

Google Maps
is not only one of the best sites for maps and directions, it’s also the
front end to an entire universe of custom maps—called mashups.
That’s because you can mash together your own personal data with a Google
map, and place the resulting mashup on your own website. In essence,
you’re creating an overlay for your data, from the information in the
Google Maps database, and that overlay is displayed on top of the appropriate
Google map.

What kind of data can you map on a Google Maps mashup? You might want to
create a map of your company’s headquarters, so that visitors can see
where you are. Or you could get really fancy and map a collection of different
locations on a single map—multiple retail stores, for example, or maybe
properties for sale or rent in a given area.

Whatever you want to map, it’s relatively easy to do. All you need to
know is the location’s latitude and longitude coordinates (which you can
get from Google Maps itself), along with a basic knowledge of HTML and
JavaScript. Then you use the Google Maps API to embed the custom maps you create
into your own web pages.

In this article, I’ll show you how to create a basic single-location
map mashup. But if you want to create more sophisticated mashups, you just add
more sophisticated code. For example, the Google Maps API lets you add custom
markers, info windows, and overlays to your maps. Each element is added via a
distinct line of code, which then uses the Google Maps API to retrieve the
appropriate map from Google.

And here’s the best thing: It doesn’t cost a dime to create your
own personal Google Maps mashups. The use of the Google Maps API is totally free
for non-commercial use.

Obtaining a License Key

To use the Google Maps API, you have to obtain a license key. This key can be
used only on the web domain you specify—so if you plan on using a practice
board or another website for development, you’ll want to get a key for
that site in addition to your main site.

You obtain your Google Maps API key at http://www.google.com/apis/maps.
This is also where you download the API’s documentation, access online
help files, and link to the official Google Maps API Blog.

To obtain a license key, you’ll need to have a Google account, and then
enter the domain of your website. Google will then email you the key, which
you’ll include in all your Google Maps code.