Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Third Party Extensions

This is a list of all the third party extensions that I know about.
 
Clusterer Handles large numbers of markers.
OverlayMessage Place a semitransparent message over a map.
ELabels Place any html element on a map (good for text labels)
GxMagnifier Adds a moveable magnified 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, customised info windows, manage lists of markers, store marker data, etc.
Custom Tile GeneratorGenerates tiles from an XML description
GRoutesProvides functionality for displaying multiple routes
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 Customised 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
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 centre, SW and NW corners, zoom level and mouse position (tile numbers, (x,y) position and lat/lon)
MapIconMakerEasily create dynamically sized and coloured 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
Frame AnimationFrame animation overlay
MControl SuiteA bunch of custom controls.
cSnapToRouteSnap a marker to the closest point in a polyline
ProgressbarControlProgress bar control
NASA Maps NASA Extensions to the Google Maps API
Geometry Controls Edit content just like My Maps
CSGeoXml Renders KML files as a single overlay.
Intellisense Helper Intellisense helper for VS2008.
ClusterManager Substitutes markers that would overlap with clusters.
Popup Title A little popup for GMarkers
DragzoomZoom by dragging a rectangle on the map
ExtLargeMapControlCustom Large Map COntrol that uses the new graphics
ExtMapTypeControlAdds overlay controls that look like map type controls
SnapToRouteSnap a marker to closest point on a line.
MultiIconMarkerChange marker icon when an event occurs
MyMapExplorerEmbed MyMaps in your web page
Custom Marker MakerCreates suitable files for a custom marker.

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
 


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, 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
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
 


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


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/
 


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/
 


LabeledMarker

Supports 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
 


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

Customised Info Window.

Author: Joe Monahan

Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/.
 


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


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


MapIconMaker

Easily 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)
 


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
 


Frame Animation Overlay

Author: "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 Suite

A bunch of custom controls.
  • MMapTypeControl
  • MOpacityControl - With a separate slider foreach tile layer
  • MZoomControl - Allows for predefined zoom levels
  • MStatusControl - Displays map status and mouse position info
  • MTileNumberControl - Displays tile numbers over the map
Author: Marcelo Montagna

Information and example: maps.forum.nu/gm_custom_controls.html
 


cSnapToRoute

Snap a marker to the closest point in a polyline

Author: Bill Chadwick

Information and example: wheresthepath.googlepages.com/cSnapToRouteDemo.html
 


ProgressbarControl

Progress Bar Control

Author: Björn Brala

Information and example: gmaps-utility-library.googlecode.com/svn/trunk/progressbarcontrol/
 


NASA Maps

Extra 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 Controls

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


CSGeoXml

A modified version of EGeoXml that acts like a single overlay.

Author: Matt Bernier

Information: devblog.cloudsync.com/projects/csgeoxml/
 


Intellisense Helper

Intellisense helper for VS2008.

Author: Nicolas Boonaert & Roger Chapman

Information: www.codeplex.com/GMapJS
 


ClusterManager

ClusterManager 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 Title

Displays a popup mini bubble for marker mouseover titles.

Author: Masashi Katsumata

Information and Example: googlemaps.googlermania.com/gmapkit/example/GMarkerPopupTitle.html.
 


Dragzoom

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


ExtLargeMapControl

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


ExtMapTypeControl

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


SnapToRoute

SnapToRoute will snap a marker to closest point on a polyline.

Author: Bjorn Brala

Information and examples: gmaps-utility-library.googlecode.com/svn/trunk/snaptoroute/.
 


MultiIconMarker

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


MyMapExplorer

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

Upload 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