Third Party Extensions

Google Maps API Tutorial

Using the EWindow extension

The EWindow extension provides some of the functionality of custom info windows.

Here’s an example with a single EWindow that behaves something like the Google info window.

Here’s a similar example but now the EWindow has a close icon.

Here’s an example with multiple info windows that are permanently open.

Here’s a rather messy example with tabbed EWindows.

The basic procedure for using EWindows is:

  1. Download the ewindow.zip file which contains all the components, unzip it an place the contents on your web site.
  2. Call the CSS file like this <link rel=”stylesheet” type=”text/css” href=”ewindow.css”>
  3. Load the Javascript code like this <script type=”text/javascript” src=”ewindow.js”></script>
  4. Create and addOverlay() one or more EWindows, e.g. ewindow = new EWindow(map, E_STYLE_1); map.addOverlay(ewindow);
  5. Open the EWindow with ewindow.openOnMarker(marker,html) orewindow.openOnMap(point, html, offset)

EWindow Constructor

The parameters for new EWindow() are:

map The map on which the EWindow is to appear.
EStyle Information about the style of the EWindow
A few EStyles are provided, E_STYLE_1, E_STYLE_2, etc. or you can design your own.

Opening an EWindow

There are two methods provided for opening an EWindow

ewindow.openOnMap

This opens the EWindow on the map that you specified in the EWindow constructor.

point A GLatLng() or GPoint() specifying the geographical location
html A string containing simple HTML.
EWindows won’t handle all the complicated HTML that a Google info window can cope with, and won’t auto wrap the text. You’ll need to use <br> wherever you want the text to break
offset (optional) A GPoint() specifying a pixel offset.

ewindow.openOnMarker

This opens the EWindow on the map that you specified in the EWindow constructor, with a location derived from the specified marker.

This call uses the infoWindowAnchor parameter of the icon that is being used by the marker.

marker The marker on which the EWindow is to be opened.
html A string containing simple HTML.
EWindows won’t handle all the complicated HTML that a Google info window can cope with, and won’t auto wrap the text. You’ll need to use <br> wherever you want the text to break

Multiple EWindows

You can have as many EWindows as you like on the same map. Use the EWindow constsuctor to construct them ewindow2 = new EWindow(map, E_STYLE_1); map.addOverlay(ewindow2);

Closing an EWindow

Use ewindow.hide()

There’s no close icon in an EWindow, so you might consider arranging for them to close when the user clicks on the map

      // ========== Close the EWindow if theres a map click ==========
      GEvent.addListener(map, "click", function(marker,point) {
        if (point) {
          ewindow.hide();
        }
      });

map.removeOverlay(ewindow) is provided because it’s a required part of the Custom Overlay interface, but I don’t recommend using it.

You can use ewindow.show() to unhide an EWindow.

EWindow.copy()

ewindow.copy() is provided because it’s a required part of the Custom Overlay interface, but the copy will not be visible uless you use .openOnMap() or .openOnMarker() on the copy. So, for example, the EWindow will not be visible in blowups.

Making your own EStyles

If you don’t like the EStyles that are provided, you can make your own.

Create a suitable image for the stem. To keep things reasonably simple, the anchor point is always the bottom left corner of the stem image.

Then use the EStyle constructor like this
myEStyle = new EStyle(stemImage, stemSize, boxClass, boxOffset);

The parameters are:

stemImage A string containing the URL of the image file
stemSize A GSize() containing the pixel size of the stemImage
boxClass A string containing a class name to be used for the CSS style
boxOffset A GPoint containing the pixel offset of the bottom of the box from the bottom of the stem image
Typically, for stems that touch the bottom of the box, the x value will be a small negative number, and the y value will be the height of the image minus the width of the box border from the CSS.
For stems that touch the left of the box (like E_STYLE_6) the x value will typically be the width of the image minus the border, and the y value will be a small positive number.

If you create some nice EStyles that other people could use, send me a copy and I’ll include them in the EWindow distribution.

Advertisements