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&amp;spn=0.006130,0.009795&amp;t=k&amp;hl=en">
  </a>
  <a title="New York" href="http://maps.google.com/maps?ll=40.755580,-73.937988&amp;spn=6.276505,5.552490&amp;hl=en">
  </a>
  <a title="Chicago" href="http://maps.google.com/maps?ll=41.877741,-87.637939&amp;spn=6.169597,5.552490&amp;hl=en">
  </a>
  <a title="Los Angeles" href="http://maps.google.com/maps?ll=33.916013,-118.179932&amp;spn=6.874500,5.552490&amp;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&amp;spn=41.589263,80.239746&amp;t=h&amp;hl=en">
    EXTENT
  </a>
  <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>

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&amp;spn=0.006130,0.009795&amp;t=k&amp;hl=en">
    A
  </a>

  <a id="chi" href="http://maps.google.com/maps?ll=41.877741,-87.637939&amp;spn=6.169597,5.552490&amp;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

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.

n01se blog - Chouser's Home Page

Copyright 2012 by Chouser, all rights reserved.