Google Maps API Tutorial

© 2006, 2007, 2008 Mike Williams

 

Third Party Extensions

This is a list of all the third party extensions that I know about.

Filled PolygonsDraws filled polygons.
Clusterer Handles large numbers of markers.
TLabel Place any html element on a map (good for text labels)
TPhoto Embed aerial photos onto a map.
OverlayMessage Place a semitransparent message over a map.
ELabels Place any html element on a map (good for text labels)
GxMagnifier Adds a moveable magnifed window
GxMarker Provides markers with built in tooltip support and hover events
EInsert Attach an image to the map that scales when the map zooms
EWindows Multiple custom info windows
PDMarker Change marker images, show tooltips on hover, customized info windows, manage lists of markers, store marker data, etc.
Custom Tile GeneratorGenerates tiles from an XML description
GRoutesProvides functionality for displaying multiple routes
GZoomZoom by dragging a rectangle on the map
BpBrowser Exposes browser and Operating System info
BpDownloadUrl Like GDownloadUrl but with more options
BpLabel Place any html element on a map (good for text labels)
BpMarker Extended Marker class with tooltip and mousover icon swapping
BpMarkerLight Extended Marker class with tooltip and mousover icon swapping
BpMarkerList Automatic sidebars.
BpWindow Display info in a box that can extend outside the map.
BpControl Simple interface to GControl.
MapTypeMenuControl A compact map type control
MarkerManager An improved Open Source version of GMarkerManager
LabeledMarker Puts text onto markers
EGeoXml Renders My Maps KML files and other similar KML files.
HtmlControl HtmlControl provides an easy way to add and position custom GControls over your Google Map.
EPoly Adds a few methods to polygons and polylines.
ASP.NET ControlWrite Google Maps with ASP.NET code instead of Javascript
EBubble An alternative to info windows
GeoXml Renders KML, GML, GPZ and GeoRSS files.
Blocks Simplified markers. Faster than GMarkers.
Graticules Display lat/lng grid or UK National Grid.
Arrows Displays small arrows using SVG or VML.
Offsetable Marker A draggable marker that leaves a line pointing back to where it came from.
Scaled Circle Displays a scaled circle using SVG or VML.
Clickable Polylines and Polygons Displays clickable polylines and polygons using SVG or VML.
Distance to Poly Calculates the distance of a point from a polyline or the boundary of a polygon.
Calculate US OS references Calculates UK Ordnance Survey map references.
ExtInfoWindow Customized Info Window
GMouseWheelControl Extra mouse functionality
ClusterMarker Detects and substitutes markers that would overlap
Bearings and Directions Functions for distances, bearings, rhumb lines, etc.
GeoKit A Rails plugin
cSnapToRoute Snap a marker to the closest point on a polyline
USNaviguide_Google_Tiles A Perl module that calculates tile details
jMaps jQuery plugin for Google Maps
Parallel Lines Creates a pair of parallel polylines
MStatusControl Displays map center, SW and NW corners, zoom level and mouse position (tile numbers, (x,y) position and lat/lon)
MapIconMakerEasily create dynamically sized and colored icons.
MarkerTrackerDisplay directional indicators for markers as they move out of a maps view.
GReverseGeocoder Reverse Geocoder
ourareaallows you to easily create an embeddable Google Map showing the area around your business that you deliver to or support.
EShapesprovides a number of additional static methods for GPolyline and GPolygon for creating certain shapes

Filled Polygons

Draws filled polygons by drawing lots of closely spaced horizontal polylines.

Author: "goldnbr1"

Example page: www.geocities.com/goldnbr1/gmap/polysample.html

Information: groups.google.com/group/Google-Maps-API/msg/6fd9019eaaff9422

Clusterer

Allows 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

TLabel v2

There's now a copy of TLabel for APIv2. TLabel allows you to place any HTML element on a map. In particular it can be used to create things that are like small infowindows.

Author: Tom Mangan

Information and examples: gmaps.tommangan.us/tlabel2.html

TPhoto v2

TPhoto allows you to embed aerial photos onto a Google map. The image is scaled as appropriate for the zoom level.

Author: Tom Mangan

Information and examples: gmaps.tommangan.us/addtphoto.html

OverlayMessage

OverlayMessage 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

Elabels

ELabels 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

GxMagnifier

GxMagnifier 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

GxMarker

Provides markers with built in tooltip support and hover events.

Author: J. Shirley

APIv2 compatibility: Robert Aspinall

Information: code.toeat.com/package/gxmarker

EInsert

The 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

EWindows

The 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

PdMarker

PdMarker is a Javascript extension to Google Maps markers. You can change marker images, show tooltips on hover, customized 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
www.pixeldevelopment.com/showmap.asp?gallery=stanleypark2004&caller=index.asp

Custom Tile Generator

This 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

GRoutes

GRoutes 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

GZoom

GZoom is a custom Google Maps control which allows you to zoom by dragging a rectangle on the map.

Author: Andre Lewis

Information and examples: earthcode.com/blog/2006/07/gzoom.html

BpBrowser

Encapsulates browser, os, and version information. Free for commercial and non-commercial use.

Author: Bitperfect Internet Solutions

Information and examples: www.gmaptools.com

BpDownloadUrl

A 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

BpLabel

A 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

BpMarker

A GMarker subclass with a few extra options. Free for non-commercial use.

Author: Bitperfect Internet Solutions

Information and examples: www.gmaptools.com

BpMarkerLight

A light-weight GOverlay subclass with image & 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

BpMarkerList

Encapsulates 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

BpWindow

An 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

BpControl

A simple interface to GControl()

Author: Bitperfect Internet Solutions

Information and examples: www.gmaptools.com

MapTypeMenuControl

A compact drop-down map type control.

Author: Dawn Endico

Information and examples: maps.tafoni.net/MapTypeMenuControl/

Open Source MarkerManager

Improved 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/

Open Source LabeledMarker

Supports markers with textual labels..

Author: Mike Purvis

Code and example: code.google.com/p/gmaps-utility-library-dev/wiki/Libraries/

Hint: LabeledMarker works well alongside MapIconMaker, like this

EGeoXml

The 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

HtmlControl

HtmlControl 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

EPoly

Author: Mike Williams

Adds 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 Control

Author: Subgurim

Code and information: en.googlemaps.subgurim.net

EBubble

The EBubble extension provides an alternative to info windows.

Author: Mike Williams

Information: my tutorial

Example Page: my example

GeoXml

The 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

Blocks

These 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

Graticules

Display lat/lng grid or UK National Grid.

Author: "Bill Chadwick "

Information: www.bdcc.co.uk/Gmaps/BdccGmapBits.htm

Arrows

Displays 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 Marker

This 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 Circle

Displays 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 Polygons

Displays 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 Poly

Calculates 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 references

Converts Lat/Lng pairs to UK Ordnance Survey references, like "SU 66277 62491".

Author: "Bill Chadwick "

Code: www.bdcc.co.uk/Gmaps/LatLngToOSGB.js

ExtInfoWindow

Customized Info Window.

Author: Joe Monahan

Example page: gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html

Information: gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/docs/examples.html.

GMouseWheelControl

A 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/.

ClusterMarker

ClusterMarker 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 centers and zooms the map in on the markers whose icons previously intersected.

Author: Martin Pearman

Information and Example: googlemapsapi.110mb.com/clustermarker/.

Bearings and Directions

Not actually an extension, but a collection of useful functions

Distance between two points (using Haversine formula).
Distance between two points (using Vincenty formula).
Bearing of one point from another.
Midpoint between two points.
Destination point given distance and bearing from start point.
Rhumb lines
Convert between degrees-minutes-seconds & decimal degrees
Convert between UK Ordnance Survey grid reference and lat/long.

Author: Chris Veness

Information and code: www.movable-type.co.uk/scripts/latlong.html.
and www.movable-type.co.uk/scripts/latlong-vincenty.html.
and www.movable-type.co.uk/scripts/latlong-gridref.html.

GeoKit

Geokit 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.

cSnapToRoute

Snap marker to closest point on a line.

Author: Björn Brala

Information and Code: demo.geostart.nl/cSnapToRoute.js.

Example: demo.geostart.nl/cSnapToRouteDemo.html.

USNaviguide_Google_Tiles

A Perl module that calculates just about everything you'd want to know about tiles including:
  • Tile name for a coordinate (lat,lng)
  • Tile name for a pixel location (x,y)
  • Tiles for a bounding box of coordinates and zoom
  • Bounding box for a tile in coordinates
  • Bounding box for a tile in pixel locations
  • Coordinates to pixel
  • Pixel to coordinates
Author: John D. Coryat

Information and Code: www.usnaviguide.com/google-tiles.htm.

jMaps

jQuery 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 Lines

Creates parallel polylines.

Author: Bill Chadwick

Code: wheresthepath.googlepages.com/BDCCParallelLines.js.

Example: wheresthepath.googlepages.com/ParallelLines.htm.

MStatusControl

displays map center, 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.

MapIconMaker

Easily create dynamically sized and colored 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

MarkerTracker

Display 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/

GReverseGeocoder

Given latitude and longitude coordinates, the reverse geocoder obtains the nearest address

Author: Nico Goeminne

Information: nicogoeminne.googlepages.com/documentation.html

ourarea

Allows 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/

EShapes

The 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

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