Before getting started, you'll need to sign up
for a Google Maps API Key. Don't forget to read
Google's Terms of Use before you agree to them! The EZ code
provided on this page is licensed under the GPL, but if
you put a EZ map on a web page, please include a link like
this: 
(here's how).
Just a map
A minimal HTML page that includes a Google Map the GMapEZ way should
look something like the below. Remember to put your own Google map
key in place of the abcdefg in this example:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>My GMapEZ Maps</title>
<meta name="gmapkey" content="abcdefg" />
<script
src="http://gmapez.n01se.net/gmapez-2.js"
type="text/javascript"></script>
</head>
<body>
<div class="GMapEZ" style="width: 300px; height: 300px;">
</div>
</body>
</html>
You can see the results of this on the right. Note that without specifying any point, the map defaults to Fort Wayne, Indiana. To change that you'll need to add a marker or specify an extent.
The important detail above is the class="GMapEZ" in the
<div> tag; without that it would be treated like a
regular <div> and no map would be displayed.
From here on, all the example code will just show the
<div> tag,
but you'll still need to keep the rest of your page.
Add a marker
To add a marker on your map, go to maps.google.com, double-click on
the point you want to mark on your map and click on "Link to this
page". Note: you must double-click or drag the map, not
just search for an address. Now copy the resulting URL into a
regular <a href="..."> tag like this:
<div class="GMapEZ" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> </a> </div>
If you don't see "ll=" in your pasted URL something is
wrong -- don't forget to double-click or drag the map after doing a
search. Also note that the map type "satellite"; that's because I was
in satellite mode when I clicked on "Link to this page".
Multiple markers
You can add multiple markers by providing multiple <a
href="..."> tags:
<div class="GMapEZ" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> </a> <a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en"> </a> <a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en"> </a> <a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en"> </a> </div>
The map will be centered so that all the points you provide are visible. Unfortunately, that also means it will default to the normal street map mode. To see how to change that, read on...
Changing the Map Type
To change the map type, add G_NORMAL_MAP,
G_SATELLITE_MAP, G_HYBRID_MAP, or
G_PHYSICAL_MAP to your
class attribute. This example shows the
G_PHYSICAL_MAP:
<div class="GMapEZ G_PHYSICAL_MAP"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
You can also let the user change to a different map type after the map is loaded. Just add a map type control.
Lettered and colored markers
All the markers we've seen so far have used Google's default dot icon
in the default orange color. Besides DOT, you can
specify any upper or lower case letter, any single-digit number,
HASH (#), DOLLAR ($), START, or
END.
As of GMapEZ 2.2, MINI and BLANK are also
available.
Starting with GMapEZ 2.3, you may also
use INVISIBLE which doesn't show up on the map at all,
but can be a useful target for info
windows and ZOOM links.
You may also combine any of the above icons with any of these colors:
ORANGE, PURPLE, YELLOW,
GREEN, BLUE, RED,
AQUA, WHITE, or GRAY. Put the
symbol name and/or the color you want inside the
<a> tag, like this:
<div class="GMapEZ"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
YELLOW MINI
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
PURPLE END
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
GREEN START
</a>
</div>
Continue the documentation with Map Controls.