Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

Translate this page:


Using the EInsert extension

The EInsert extension is implemented as a Custom Overlay.

The EInsert extension allows you to attach a scalable image to the map. The extension scales the image as the zoom level changes.

Here's an example

You could use EInserts to:

  • add updates to the Google maps (as in that example)
  • draw small complex boundary lines or tracks in a way that runs faster than polylines, and is easier to implement than a custom maptype.
  • add detailed plans of individual facilities.
  • draw circles, like this.
In order to use EInsert you need to:
  1. Create a suitable image. Transparent PNG format is particularly suitable. Animated GIF format is not suitable.
  2. Include a copy of the "einsert.js" file. Please take your own local copy, don't hot link to my copy of the file.
  3. Create some EInsert objects.
  4. Use map.addOverlay() to add them to the map.

1. Creating a suitable image

I used an image processing package that supports layers, and drew the "Hawking Way" graphic on one layer with a copy of the satellite imagery on another layer.

EInsert assumes that the image can be used with the AlphaImageLoader in IE, so avoid file formats that AlphaImageLoader can't handle, such as animated GIF.

Make a note of the dimensions of the image and the zoom level it was created to match.

2. Include a copy of the "einsert.js" file

Download it from here einsert.js

Include it like

    <script src="einsert.js" type="text/javascript"></script>

3. Create some EInsert objects

      var insert = new EInsert(new GLatLng(53.8,-3.0), 
                   "hawkingway.png", new GSize(159,435), 16);
The parameters are:
  1. A GLatLng() specifying the location of the centre of the image.
  2. A string containing the URL of the image.
  3. A GSize() specifying the size of the image.
  4. A number specifying the zoom level on which the image is to be displayed at full size.
  5. (Optional) zindex and pane control value.
    Use -1 if you want this EInsert to be placed below any polylines and GTileLayerOverlay()s.
    use 0 if you want this EInsert to be placed above any polylines and below any GTileLayerOverlay()s.
    Use 1 if you want this EInsert to be placed above any polylines and GTileLayerOverlay()s.
    Use other values to place one EInsert above or below another.

4. Use map.addOverlay() to add them to the map.

And use map.removeOverlay() if you want to remove them.

map.clearOverlays() will also remove all the EInserts as well as any markers and polylines.

Hide and Show

The insert.hide() method makes the EInsert invisible.

The method makes the EInsert visible.

The insert.isHidden() method returns true if the EInsert is hidden.

The insert.supportsHide() method returns true, indicating to the API that EInserts support hide(), show() and isHidden().

More Methods

The insert.getPoint() method returns the position of the EInsert.

The insert.setPoint(latlng) method moves the EInsert to a new position.

The insert.setSize(gsize) method changes the size of the EInsert.

The insert.setImage(url) method changes the image of the EInsert.

The insert.setZindex(a) method changes the zIndex of the EInsert relative to other EInserts.


EInserts are placed below the markers and info windows.

You can click, double-click and drag parts of the map that are underneath EInserts.

You don't need to keep a reference to your EInserts unless you want to removeOverlay() them, hide() them or change their properties.

Positioning Hint

An easy way to place your EInserts in the correct place is to make them draggable.
See Draggable EInserts

Using EInserts with MarkerManager

EInserts work under the Open Source MarkerManager.

The Open Source MarkerManager can be obtained here

MarkerManager can manage EInserts in the same way that it can manage GMarkers.

Here's an example that uses 1576 EInserts

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