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: Powered By GMapEZ (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&amp;spn=0.006130,0.009795&amp;t=k&amp;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&amp;spn=0.006130,0.009795&amp;t=k&amp;hl=en">
  </a>
  <a href="http://maps.google.com/maps?ll=40.755580,-73.937988&amp;spn=6.276505,5.552490&amp;hl=en">
  </a>
  <a href="http://maps.google.com/maps?ll=41.877741,-87.637939&amp;spn=6.169597,5.552490&amp;hl=en">
  </a>
  <a href="http://maps.google.com/maps?ll=33.916013,-118.179932&amp;spn=6.874500,5.552490&amp;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&amp;spn=0.006130,0.009795&amp;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&amp;spn=0.006130,0.009795&amp;t=k&amp;hl=en">
    A
  </a>
  <a href="http://maps.google.com/maps?ll=40.755580,-73.937988&amp;spn=6.276505,5.552490&amp;hl=en">
    YELLOW MINI
  </a>
  <a href="http://maps.google.com/maps?ll=41.877741,-87.637939&amp;spn=6.169597,5.552490&amp;hl=en">
    PURPLE END
  </a>
  <a href="http://maps.google.com/maps?ll=33.916013,-118.179932&amp;spn=6.874500,5.552490&amp;hl=en">
    GREEN START
  </a>
</div>

Continue the documentation with Map Controls.

n01se blog - Chouser's Home Page

Copyright 2012 by Chouser, all rights reserved.