Google Maps API Tutorial© 2006, 2007, 2008, 2009 Mike Williams |
Translate this page: |
Using the EInsert extensionThe 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:
1. Creating a suitable imageI 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" fileDownload it from here einsert.jsInclude it like <script src="einsert.js" type="text/javascript"></script> 3. Create some EInsert objectsE.g.var insert = new EInsert(new GLatLng(53.8,-3.0), "hawkingway.png", new GSize(159,435), 16);The parameters are:
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 ShowThe insert.hide() method makes the EInsert invisible.The insert.show() 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 MethodsThe 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. NotesEInserts 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 HintAn easy way to place your EInserts in the correct place is to make them draggable.See Draggable EInserts Using EInserts with MarkerManagerEInserts work under the Open Source MarkerManager.The Open Source MarkerManager can be obtained here http://code.google.com/p/gmaps-utility-library-dev/wiki/Libraries. MarkerManager can manage EInserts in the same way that it can manage GMarkers. Here's an example that uses 1576 EInserts |