Google Maps API Tutorial

Using the EWindow extension

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.

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) or ewindow.openOnMap(point, html, offset)
    
   

EWindow Constructor

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

Closing an EWindow

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();
        }
      });

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

EWindow.copy()

Making your own EStyles

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.

Back to Mike's Homepage
Up to the start of this tutorial