Google Maps API Tutorial© 2006, 2007, 2008, 2009 Mike Williams |
Translate this page: |
Third Party ExtensionsThis is a list of all the third party extensions that I know about.
ClustererAllows you to use large numbers of markers by collecting them into "clusters" to avoid having too many markers drawn on the screen at any time.Author: Jef Poskanzer Example page: www.acme.com/jef/hotsprings/ and my example
Information: www.acme.com/javascript/#Clusterer and my tutorial OverlayMessageOverlayMessage allows you to place a semi-transparent message over the top of any HTML element. It's not a true Google API Map extension, because it works equally well on things other than maps.Author: Jef Poskanzer Example page: my example
Information: www.acme.com/javascript/#OverlayMessage ElabelsELabels allow you to place any HTML element on a map as a Custom Overlay. You can use it in a similar manner to TLabel.Author: Mike Williams Information: my tutorial
Example Page:my example GxMagnifierGxMagnifier is a free add-in control for Google Maps that creates a moveable, magnified window on top of your map.Author: Richard Kagerer APIv2 compatibility: Andre Howe Example page: boxme.net/wdch/test.html Download: boxme.net/wdch/GxMagnifier2.js
Information (v1 version): www.googlemappers.com/libraries/gxmagnifier/docs/default.htm GxMarkerProvides markers with built in tooltip support and hover events.Author: J. Shirley APIv2 compatibility: Robert Aspinall
Information: code.toeat.com/package/gxmarker EInsertThe EInsert extension allows you to attach a scaleable image to the map. The extension scales the image as the zoom level changes.Author: Mike Williams Information: my tutorial
Example Page:my example EWindowsThe EWindows extension provides some of the functionality of Custom Info Windows.You can design your own info window styles, and have more than one EWindow open on the same map. Author: Mike Williams Information: my tutorial
Example Page: my example PdMarkerPdMarker is a Javascript extension to Google Maps markers. You can change marker images, show tooltips on hover, customised info windows, manage lists of markers, store marker data, etc.Author: Peter Jones Information: www.pixeldevelopment.com/pdmarker.asp
Example Pages:www.pixeldevelopment.com/virtualgoogleearth.asp Custom Tile GeneratorThis Windows desktop application accepts XML files that describes shapes (beziers, closed curves, curves, ellipses, images, polygons, polylines, rectangles, text and filled shapes) and generates a set of tiles suitable for using in a custom GTileLayer.Author: Jacob Reimer Information: www.reimers.dk/blogs/jjrdk/archive/2006/04/14/216.aspx and www.reimers.dk/blogs/jjrdk/archive/2006/05/09/252.aspx
Example Page: www.reimers.dk/demos/wmsdemo.aspx GRoutesGRoutes is a JavaScript package that provides functionality for displaying multiple routes (including an associated set of markers) on a map along with a control to switch between maps. Informational texts on the markers to be displayed in the info window (bubble) are also supported.Author: Holger Pollmann Information: www.stud.uni-giessen.de/~st8632/misc/internet/googlemaps.html
Example Page: www.stud.uni-giessen.de/~st8632/misc/internet/groutesdemo.html BpBrowserEncapsulates browser, os, and version information. Free for commercial and non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpDownloadUrlA more fully-featured version of GDownloadUrl, allowing you to execute POST and synchronous AJAX requests. Free for commercial and non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpLabelA robust GOverlay subclass. Lets you put HTML on the map as an overlay. Free for non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpMarkerA GMarker subclass with a few extra options. Free for non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpMarkerLightA light-weight GOverlay subclass with image and icon swapping, tooltip support, etc. The fact that it's light-weight allows you to add hundreds of markers to a map quickly. Free for non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpMarkerListEncapsulates a map sidebar which holds divs which represent markers. Allows for sorting, managing div content and events through the use of HTML templates, and more. Free for non-commercial use..Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpWindowAn infoWindow-type tool which can open outside the map. As a result, the map will never automatically pan to show its contents. It also can open outside of its iframe, and open up, right, left, or down, depending on what direction will allow it to open within existing page borders. Free for non-commercial use.Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com BpControlA simple interface to GControl()Author: Bitperfect Internet Solutions
Information and examples: www.gmaptools.com MapTypeMenuControlA compact drop-down map type control.Author: Dawn Endico
Information and examples: maps.tafoni.net/MapTypeMenuControl/ MarkerManagerImproved version of GMarkerManager.As well as doing everything that GMarkerManager does, the Open Source version allows markers to be removed, has some bug fixes, and can be used to manage custom overlays, such as ELabels and EInserts, as well as GMarkers. Author: Doug Ricket, others
Information and examples: code.google.com/p/gmaps-utility-library-dev/wiki/Libraries/ LabeledMarkerSupports markers with textual labels.Author: Mike Purvis Code and example: gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/
Hint: LabeledMarker works well alongside MapIconMaker, like this EGeoXmlThe EGeoXml extension renders My Map KML files and other KML files of similar structure. The internal structures are exposed, allowing you to have much more control than when using GGeoXml.Author: Mike Williams Information: my tutorial
Example Page: my example HtmlControlHtmlControl provides an easy way to add and position custom GControls over your Google Map.An HtmlControl can contain any valid HTML markup and can be styled with any valid CSS style-rules. HtmlControl makes it easy to create; buttons, hideable menus and forms, map loading messages and much more! Author: Martin Pearman Information: googlemapsapi.martinpearman.co.uk/htmlcontrol
Example Page:googlemapsapi.martinpearman.co.uk/htmlcontrol/demo_map.php EPolyAuthor: Mike WilliamsAdds methods to GPolygon and GPolyline for determining the area, bounds, path length and whether a GLatLng is contained within the poly. Information: my tutorial
Example Page: my example ASP.NET ControlAuthor: Subgurim
Code and information: en.googlemaps.subgurim.net EBubbleThe EBubble extension provides an alternative to info windows.Author: Mike Williams Information: my tutorial
Example Page: my example GeoXmlThe GeoXml extension enables client-side parsing and viewing of a number of flavors of GeoXml, including GML from WFS servers, GPX from GPS devices or log as well as KML and multiple flavors of GeoRSS,In addition to the XML it supports saving out and re-loading of KJSON.Author: Lance Dyas
Information and example: www.dyasdesigns.com/geoxml BlocksThese are a very simple coloured block marker with a tooltip. The point of these is that for the same load time, you should be able to use more of these on a map than you can GMarkers.Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm GraticulesDisplay lat/lng grid or UK National Grid.Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm ArrowsDisplays small arrows using SVG or VML.Because this extension relies on SVG or VML, it will not work in browsers which do not support these features. Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm Offsetable MarkerThis uses sub-classing on GMarker to provide a marker that can be dragged from its spot but leaves a line indicating its actual reference point.Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm Scaled CircleDisplays a scaled circle using SVG or VML.Because this extension relies on SVG or VML, it will not work in browsers which do not support these features. Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm Clickable Polylines and PolygonsDisplays clickable polylines and polygons using SVG or VML.Because this extension relies on SVG or VML, it will not work in browsers which do not support these features. Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm Distance To PolyCalculates the distance of a point from a polyline or the boundary of a polygon.Author: "Bill Chadwick "
Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm Calculate US OS referencesConverts Lat/Lng pairs to UK Ordnance Survey references, like "SU 66277 62491".Author: "Bill Chadwick "
Code: www.bdcc.co.uk/Gmaps/LatLngToOSGB.js ExtInfoWindowCustomised Info Window.Author: Joe Monahan
Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/. GMouseWheelControlA custom control built by using Google Map API to enhance the usage of a mouse on Google Map. It can be used in any Google map mashups. It takes advantage of scroll wheel mouse.Author: Pman (Parvez Akkas)
Information and Example: www.pmanslab.com/projects/gmwControl/. ClusterMarkerClusterMarker detects any group(s) of two or more markers whose icons visually intersect when displayed. Each group of intersecting markers is then replaced with a single cluster marker. The cluster marker, when clicked, simply centres and zooms the map in on the markers whose icons previously intersected.Author: Martin Pearman
Information and Example: googlemapsapi.110mb.com/clustermarker/. Bearings and DirectionsNot actually an extension, but a collection of useful functions
Distance between two points (using Haversine formula). Author: Chris Veness
Information and code: www.movable-type.co.uk/scripts/latlong.html. GeoKitGeokit is a Rails plugin for building location-based apps. It provides geocoding, location finders, and distance calculation in one cohesive package. If you have any tables with latitude/longitude columns in your database, or if you every wanted to easily query for "all the stores within a 50 mile radius," then GeoKit is for you.Authors: Bill Eisenhauer and Andre Lewis
Information and Examples: geokit.rubyforge.org. USNaviguide_Google_TilesA Perl module that calculates just about everything you'd want to know about tiles including:
Information and Code: www.usnaviguide.com/google-tiles.htm. jMapsjQuery plugin that provides several useful functions that make working with Google maps easier.Author: Tane Piper Code: hg.digitalspaghetti.me.uk/jmaps/.
Documentation: hg.digitalspaghetti.me.uk/jmaps/raw-file/271365e77c35/docs/index.html. Parallel LinesCreates parallel polylines.Author: Bill Chadwick Code: wheresthepath.googlepages.com/BDCCParallelLines.js.
Example: wheresthepath.googlepages.com/ParallelLines.htm. MStatusControldisplays map centre, SW and NW corners, zoom level and mouse position (tile numbers, (x,y) position and lat/lon)Author: Marcelo Montagna
Source and Example: maps.forum.nu/gm_MStatusControl.html. MapIconMakerEasily create dynamically sized and coloured icons.The icon images are generated dynamically using a secret feature of the Google Chart API. There's a Wizard to help you choose the settings, and a Blog article with details and examples. (The URL of the Wizard changes from time to time. If the wizard link fails, use the blog link and go from there.) As well as generating the image, IconFactory also produces correct shadows, click targets, and printImages. Author: Pamela Fox Source and Examples: gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/
Hint: LabeledMarker works well alongside MapIconMaker, like this
(now probably obsolete, because MapIconMaker v1.1 includes createLabeledMarkerIcon) MarkerTrackerDisplay directional indicators for markers as they move out of a maps view.There's a Blog article with details and examples. Author: Dan Rummel
Source and Examples: gmaps-utility-library.googlecode.com/svn/trunk/markertracker/ GReverseGeocoderGiven latitude and longitude coordinates, the reverse geocoder obtains the nearest addressAuthor: Nico Goeminne
Information: nicogoeminne.googlepages.com/documentation.html ourareaAllows you to easily create an embeddable Google Map showing the area around your business that you deliver to or support.Author: Nirmal Patel
Website: www.nirmalpatel.com/ourarea/ EShapesThe EShapes extension provides a number of additional static methods for GPolyline and GPolygon for creating certain shapes. It also provides two functions that can help in the placement of such shapes.Author: Mike Williams Information: my tutorial
Example Page: my example Frame Animation OverlayAuthor: "bratliff"Useful for animated overlays, like moving weather radar images. Please make your own copy because the one on this page may change. Code: www.polyarc.us/frameanimation.js
Example Page: www.polyarc.us/ridge MControl SuiteA bunch of custom controls.
Information and example: maps.forum.nu/gm_custom_controls.html cSnapToRouteSnap a marker to the closest point in a polylineAuthor: Bill Chadwick
Information and example: wheresthepath.googlepages.com/cSnapToRouteDemo.html ProgressbarControlProgress Bar ControlAuthor: Björn Brala
Information and example: gmaps-utility-library.googlecode.com/svn/trunk/progressbarcontrol/ NASA MapsExtra map types for the Moon and Mars, including polar maps.Author: NASA Info: ti.arc.nasa.gov/projects/planetary/maps.php As supplied, the polar map projections don't support polylines or polygons. If you want to draw polylines, then you can use this version of the code: nasamaps2.js which uses a nasty hack to work round the bug in the API. If you're not using polylines, then use the NASA version of the code, because i't likely to be faster and to be kept up to date with new imagery.
Here's an example of a NASA Polar map with polylines. Geometry ControlsEdit content just like with My Maps.Author: Chris Marx and Pamela Fox and others Example: gmaps-utility-library-dev.googlecode.com/svn/trunk/geometrycontrols/examples/test.html Info: gmaps-utility-library-dev.googlecode.com/svn/trunk/geometrycontrols/docs/reference.html
Code: gmaps-utility-library-dev.googlecode.com/svn/trunk/geometrycontrols/ CSGeoXmlA modified version of EGeoXml that acts like a single overlay.Author: Matt Bernier
Information: devblog.cloudsync.com/projects/csgeoxml/ Intellisense HelperIntellisense helper for VS2008.Author: Nicolas Boonaert & Roger Chapman
Information: www.codeplex.com/GMapJS ClusterManagerClusterManager detects any groups of two or more markers whose icons visually intersect when displayed. Each group of intersecting markers is then replaced with a single cluster marker. The cluster marker, when clicked, provides an info window that gives access to the original markers.Author: Peter van der Zee
Information and Example: cm.qfox.nl. Popup TitleDisplays a popup mini bubble for marker mouseover titles.Author: Masashi Katsumata
Information and Example: googlemaps.googlermania.com/gmapkit/example/GMarkerPopupTitle.html. DragzoomDragzoom is a custom Google Maps control which allows you to zoom by dragging a rectangle on the map.Author: Andre Lewis
Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/ ExtLargeMapControlA custom Large Map COntrol that uses the new graphics, as seen on maps.google.com.Author: Bjorn Brala
Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/extlargemapcontrol/. ExtMapTypeControlExtMapTypeControl lets you add a control to the map which looks like the typical GMapTypeControl from the obfuscated API. By specifying additional options however, you can also add a Traffic button to the control and a drop-down legend for that button. Author: Pamela Fox and others
Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/extmaptypecontrol/. SnapToRouteSnapToRoute will snap a marker to closest point on a polyline.Author: Bjorn Brala
Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/snaptoroute/. MultiIconMarkerAn alternative for GMarker that allows the associated GIcon to be changed (not just the icon image) when an event occurs.Hint: by using your own custom events you can achieve the equivalent of a .setIcon() method. Author: Masashi Katsumata
Information and examples: gmaps-utility-library-dev.googlecode.com/svn/trunk/multiiconmarker/. MyMapExplorerAllows you to embed a map created using Gooogle Maps’ My Maps feature into any web page with more information and flexibility than Google’s iFrame embed code.Author: John Beales
Information and examples: code.google.com/p/mymapexplorer. Custom Marker MakerUpload an image (png, gif, jpg) and this page creates the 6 separate image files (image, shadow, printImage, mozPrintImage, printShadow and transparent) that make up a custom marker icon and suggests an array of x,y pixel coordinates that define the image map area used for capturing image clicks in non IE browsers. Transparency of the original image is preserved. Users see their image as a marker on a map and are presented with a zipped package for download that contain the generated images and some sample code.Author: Graham
URL: www.powerhut.co.uk/googlemaps/custom_markers.php. Back to Mike's Homepage Up to the start of this tutorial |