This section covers some more advanced topics.
MouseOver Popups
Starting with GMapEZ 2.2, you can have a little popup show up when
the user's mouse rolls over the marker. The popup can only have
text, unlike info windows which
can have any HTML. Add a title attribute to your
<a> tag to specify the text you want to have pop up:
<div class="GMapEZ" style="width: 300px; height: 300px;"> <a title="4D Development" href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> </a> <a title="New York" href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en"> </a> <a title="Chicago" href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en"> </a> <a title="Los Angeles" href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en"> </a> </div>
Note that different browsers may display the popup quite differently. For example, Opera puts the word "Title:" in front of the text you provide.
Specifying an extent
In some situations you may want to specify a default zoom level or pan
position that is different than what GMapEZ automatically chooses for
you. To do this, go to maps.google.com, drag
the map to the area you want to display, set the map type, the zoom
level, etc. Now click "Link to this page" and copy the URL into your
<div> just like you did for a marker. But this
time, instead of
blank text inside the <a>, use the word EXTENT in
all caps, like the first <a> tag below:
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=51.890054,-98.613281&spn=41.589263,80.239746&t=h&hl=en">
EXTENT
</a>
<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>
So in this example, I decided to use the Hybrid map type and to make
Canada visible even though there are no markers in Canada. The map
type used in the EXTENT link will be used for your map, unless you
override it with a class map type, as described above.
ZOOM links
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a id="hq" href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<a id="chi" href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
C
</a>
</div>
Before GMapEZ 2.3, links to markers would only
open an info window and cause the map to pan. Now by adding a
ZOOM class, a link can also cause a map to change zoom
level and map type. For example: Zoom in
to 4D or Zoom out to Chicago
<a href="#hq" class="ZOOM">Zoom in to 4D</a> or <a href="#chi" class="ZOOM">Zoom out to Chicago</a>
The link in the targeted marker is interpreted exactly like an extent. If the targeted marker is followed by
a <div> tag, this will still be opened as an info window.
Using multiple API keys
Some web pages are available from different URLs, such as localhost
for testing, with and without a leading "www.", etc. In these cases,
the Google API keys can be a pain. GMapEZ helps by letting you
specify different keys for different URLs. The default key is
specified as described previously. Note
the name attribute particularly:
<meta name="gmapkey" content="abcdefg" />
To specify a key for a particular URL, you can give part of that url
(the pattern) in the name attribute. For example,
if want to use a key "hijklmn" when the URL is
http://localhost/, and a key "abcdefg"
otherwise:
<meta name="gmapkey:localhost" content="hijklmn" /> <meta name="gmapkey" content="abcdefg" />
You can give as many different keys as you want. The order matters,
though -- the first pattern that matches the page's URL is the one
that will be used. If none of the patterns match, the key given with
name="gmapkey" will be used.
To be standards-compliant, all
<meta> and <script> tags should
appear in in the <head> section of your page, but
most browsers allow them to appear in the <body>
section and everything will work fine. However, it's important that
all the these <meta> tags appear before the
<script src="...gmapez..."> tag.
The patterns given in these <meta> tags are actually regular
expressions, but if you don't know what that means, don't worry
about it. Simply copying a portion of your page's URL will work fine in
most situations.
Drawing lines
-
OPEN GREEN START
Start here
-
ORANGE END
End here.
You may add lines to your map by adding one or more
<ol> sections inside your GMapEZ
<div> tags. Inside each <ol>
section, list two or more points using the normal
<a> marker tags described above. That's all you need to make GMapEZ draw a
line between each of the points you specify. Make sure your
<html> tag has the
urn:schemas-microsoft-com:vml specified as shown above, or your page will generate an error in
IE.
Here is a slightly more complicated example:
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl G_SATELLITE_TYPE"
style="width: 300px; height: 300px;">
<ol class="color:#00ff00 weight:3 opacity:0.6">
<li><a href="http://maps.google.com/maps?ll=41.564259,-85.852840">
OPEN GREEN START
</a>
<div>Start here</div></li>
<li><a href="http://maps.google.com/maps?ll=41.565314,-85.850486">
</a></li>
<li><a href="http://maps.google.com/maps?ll=41.563443,-85.849449">
ORANGE END
</a>
<div>End here.</div></li>
</ol>
</div>
This example includes <li> tags that are only
required for HTML validation. GMapEZ doesn't mind if you leave them
out.
In this example I used the optional class attribute to
specify some non-default line options. Don't try to use a
style attribute for these, even though the syntax looks
similar:
| option | this example | description |
|---|---|---|
| color | #00ff00 | A standard 6-digit hex code to set the line color. |
| weight | 3 | Sets the width of the line in pixels. |
| opacity | 0.6 | A fraction number between 0 (fully transparent, invisible) and 1 (fully opaque) |
Note that inside <ol> tags, if you don't specify an icon no marker will be shown at all.
If you try to attach an infoWindow to one
of these non-existent markers, GMapEZ will generate a warning. In order to get the normal
Google dot marker, you must specify a DOT icon.