Using the Google Maps API v3

Links to examples of various useful things and documentation

• V3 Documentation - tag on StackOverflow - gmaps-api-issues - geoxml3 issues
• Google Maps API V3 discussion group
• google.maps namespace scanner(by Esa)
• little red "ride finder" markers
• little different colored "ride finder" markers - with shadows (post "visual refresh")
• normal sized colored markers - Normal Sized Markers with shadows (post "visual refresh")
• 3D version of different colored "ride finder" markers
• custom markers with infowindows (v2 infowindow behavior)
• normal sized colored markers with infowindows (v2 infowindow behavior)
• different colored markers available from google
• styling the infowindow with CSS
• Convex Hull example on set of random points
• Mike Williams' tutorial The Basics - Part 1: Markers with info windows translated to v3
• Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar
  • translated to v3
  • show/hide sidebar
• Mike Williams' tutorial The Basics - Part 3: Loading the data from an XML file
  • translated to v3
  • v3 version that doesn't use function closure
  • with added "Zoom To, Zoom In, Zoom Out links in infowindow
  • With clustering - With only "unclustered" markers in the viewport listed in the sidebar
  • Find closest marker to clicked point on map
  • Find closest marker to geocoded (or clicked) point on map
  • Radius Search
  • with Street View
• Mike Williams' tutorial The Basics - Part 4: Getting Directions translated to v3
• Mike Williams' tutorial More advanced stuff - Part 26: Get directions on your own map translated to v3
• Mike Williams' tutorial The Basics - Lots of sidebar entries (4. Select box example) translated to v3
• Mike Williams' tutorial More advanced stuff - Part 25 Marker Categories translated to v3
• Toggle Group example from StackOverflow (modified to use the same data as the "Mike Williams" example)
• Modified Mike Williams' example that changes the marker icons on mouseover/mouseout (v3) (his example for v2 is from this page [Sidebar mouseovers] of his tutorial).
• Add marker with open infowindow on map click
• Mike Williams' tutorial More advanced stuff - Part 20 Passing and receiving parameters translated to v3
• Mike Williams' tutorial More advanced stuff - Part 20 Passing and receiving parameters
  • link to 2nd marker in xml (v3)
  • link to "Marker Two" (v3)
  • Combined link to marker, link to this example
• Mike Williams' tutorial Third Party Extensions - Part 15 Using EShapes - draws standard shapes translated to v3
• Add markers from coordinates in text box
• Geocoding/Directions Test Page - Geocode the start and end, then get directions
• Geographic Editing tool Based off of Blitz-GMap-Editor (which in turn is based off the Google Maps API v3 DrawingManager) - allows geographic objects to be edited (Polygons, Polylines, Markers, Circles, Rectangles), exported as KML or JSON, also imports JSON and Polygons from encoded strings.
• Rotate map tiles, create Markers/Polylines from JSON
• Directions examples
  • Directions example with custom markers (icons)
  • Directions example with custom (dashed) polyline
  • Directions with draggable start/end markers
  • Directions with draggable start/end markers, reverse geocodes the dragged location
  • Directions example with LatLng waypoint
  • Directions example with address waypoint
  • Directions with waypoint marker
  • Directions with waypoint, total distance/duration
  • Directions with waypoint marker and clickable polyline
  • Animated directions (moving marker)
  • Multiple Animated Markers on multiple routes (moving markers)
  • Draggable Directions
  • Draggable Directions to Xml
  • Showing alternate directions
  • Alternate directions with panel
  • Combining mulitple responses, custom markers (12 locations, from coordinates) - 2nd example (22 locations, from addresses)
  • Travel Mode with waypoint (doesn't work for Transit)
  • With "MiniMap" in infowindow
  • Transit directions (doesn't work with waypoint)
  • Dynamic Directions and RouteBoxer
  • Interactive route, click to draw, drag to change
  • Directions polyline with tooltip
  • Directions arguments from the query string
  • zip codes along route
  • Drag Marker along polyline from Directions Service
  • Towns along route (using routeboxer, places API)
  • Directions between 2 markers in a KML file (using geoxml3)
  • "Buffered" directions (using JSTS)
  • find locations along route ("Buffered" directions using JSTS, point in polygon) - with origin, destination, waypoints from query string
  • Display common points on 2 routes from the directions service
  • Calculate miles tavelled by state
  • Marcelo's Drive Radius example (v2)[site no longer live] - Marcelo's Drive Radius example (ported to v3) (plot locations that reach 30 miles from a center point)
  • Mile/Km Marker examples
    • Km Markers every 2 km
    • mile markers with coordinates in infowindow
    • Marker at 9.5km and 64.8km
    • Place marker on route based on time travelled
• JSTS examples (library home on github is: https://github.com/bjornharrtell/jsts)
  • intersection of polygons
  • union of polygons
  • union of polygons
  • Buffered (directions) polyline
  • JSTS delaunay-triangulation and voronoi diagram generation example on Google Maps
    (original OpenLayers example from the JSTS examples)
• Geocoder examples
  • Zoom to (US) state
  • Zoom to country
  • Simple APIv3 map with geocoding
  • Reverse Geocode, extract state, county/city from result
  • Example using a geocoded address and point in polygon analysis on polygons from a FusionTable
  • Using Zillow neighborhood data imported into FusionTables (for Chicago)
  • Geocoding Multiple Points
  • Geoding Multiple Addresses from table
  • Postcode from geocoded address, reverse geocoded coordinates or click on the map
  • circle from geocoded address, with radius from dropdown
  • 3 closest places to the geocoded result (by driving distance, using DistanceMatrix)
  • 10 closest places to the geocoded result (by driving distance, using DistanceMatrix)
  • 10 closest places to the geocoded result, sorted by driving distance from the DistanceMatrix
  • 3 closest places to the geocoded result with directions from the geocoded location to the location
• Places API examples
  • Pagination example (Booster Juice in Toronto)
  • Airports near Sydney
  • Places Autocomplete
  • Places text search
    • Funan DigitaLife Mall Singapore 179097
    • Canara Bank, Connaught Place, New Delhi, Delhi, India
    • Manhattan Associates India Dev Center, EPIP Zone, Bangalore, Karnataka, India
    • St Joseph's Hospital and Medical Center
  • Places results within a 10 minute drive of location (or click on map)(Places API, DistanceMatrix)
• Elevation examples
  • Google elevation example with distance calculation
• Data Layer Examples
  • Point in Polygon on Polygon from GeoJSON, using containsLocation
• Polygon examples
  • v3_polygon_example
  • v3_polygon_exampleA
  • v3 polygon exmple, with 3201 point polyline
  • with infowindows (v3 behavior)
  • 64 polygons on a map
  • Even more polygons on a map (try in IE at your own risk...)
  • Donut polygon - Multiple holes - Overlapping holes - More complex - More complex (different version)
  • Hexagon
  • Polygon arc
  • More Polygon arcs - Same but using the geometry library
  • Polygon squares
  • Clickable Polygon squares
  • Area calculations on polygons
  • Area calculations on polygons using the google.maps.geometry.spherical library
  • Polygons from GeoJSON (simple, single path)
  • Polygon from encoded
  • Polygon with draggable markers bound to the vertices
• Polyline examples
  • Kilometer markers on a route
  • Polyline arc
  • Rhumb line vs. Great Circle
  • center of geodesic polyline
  • Animate marker along polyline (from xml)
  • Polyline with draggable markers bound to the vertices (except the first and the last)
• Bounds examples
  • map.getBounds example
  • Simple extension of Google's "simple geocoder" to display the returned viewport bounds
• Tabbed InfoWindows
  • tabbed infowindows from xml
• KmlLayer examples
  • KmlLayer display of US States KML (linkto)
  • KmlLayer linkto example
  • KmlLayer displaying Google's cta.kml example
  • Toggle multiple KmlLayers, zoom to show visible ones
• geoxml-v3 example(s) (Lance Dyas' port of GeoXml from v2 to v3; GeoXml based off of Mike Williams' EGeoxml)
  • example from http://code.google.com/p/geoxml-v3/
• geoxml3 examples & test cases (testing kmz implementation)
  • Jimmy Buffett Tour example from Google KMZ documentation
  • load kmz file with embedded icons
  • load kmz file with embedded image in infowindow
  • multiple kmz files
  • multiple kmz files (linkto example, complex KML, may require large amounts of memory and time to render)
  • Multiple parseKmlString test
  • multiple kmz files (another linkto example, complex KML, may require large amounts of memory and time to render)
  • processing intensive kmz
  • marker sprites scaled (kmz)
  • marker sprites (kmz)
  • network link, external styles
  • Decode data from MyTracks Android App exported KMZ file (click polyline for data from closest point)
  • Decode data from MyTracks Android App exported KMZ file (color polyline by speed)
  • KMZ files from gadm.org
    • Spain (adm0)
    • States of Spain (adm1)
    • Provinces of Spain (adm2) - Province of Heulva, Spain
    • (adm3)
    • (adm4)
    • Poland (adm0) - Poland (inverted)
    • Poland (adm1)
    • Poland (adm2)
  • insetPixels
    • insetPixels test case 1
    • insetPixels test case 2
  • GroundOverlay <rotation>
    • GroundOverlay rotation example 1
    • GroundOverlay rotation example 2
• geoxml3 examples & test cases (testing polyline & polygon implementation)
  • from KmlMapParser examples
    • Chicaco Bike Parking.kml
    • MA_cities.kml
    • MBTA Commuter Rail (MBTA_CR_Lines.kml)
    • permitData.kml
    • sail.kml
    • sidebarMap.kml
    • simpleMap.kml
    • state_capitals.kml
  • show/hide markers (US state capitols)
  • another marker test case
  • show/hide markers - Kml with polyline and markers
  • Load KML_Samples.kml
  • Global Volcanism Program Weekly Report
  • Simple Network Link Test - complete URL
  • Simple Network Link Test - local file
  • KML with Polygons
  • KML Polygon with holes (now depends on winding direction, as of April 2011)
  • Polygon winding calculation (very computationaly intensive on complicated polygons)
  • KML winding reversal tool - before
  • point in polygon example - version that takes KML URL in query string - same map, using Fusion Tables instead of geoxml3
  • Access individual polygons
  • State of Hawaii from KML (compare to kmlLayer)
  • State of Alaska from KML (compare to kmlLayer) (complex KML, usual warnings apply with IE)
  • US states w/ sidebar (complex KML, usual warnings apply with IE)
  • Polygons w/sidebar - Same, but using the google.maps.geometry.poly.containsLocation method
  • highlight individual polygons return to original color
  • highlight individual polygons from multiple KML files
  • Highlight individual polygons (complex KML, usual warnings apply with IE)
  • Custom parse function, manage "map" infowindow example
  • AfterParse function to add markers at centroid/center of bounds of polygons - second example
  • Custom createMarker function to add button to infowindow
  • Custom createMarker function to add Street View to infowindow (looking at the marker)
  • Projected Overlay test page from John Coryat (www.usnaviguide.com)
  • Highlight polylines on mouseover
  • Google "CTA" example
  • Dynamic sidebar of polygons in view (complex KML, usual warnings apply with IE)
  • link to example
  • Google "CTA" example (with highlighting and sidebar)
  • Ground overlay - UN Map of Israel
  • Map of Israel, Ground Overlay, Polygons
  • Map of Georgia, Ground Overlay, Polygons
  • Map of Africa with capitols
  • multiple kml files (complex KML, may require large amounts of memory and time to render)
  • two kml files
  • five kml files
  • six kml files
  • another example with six kml files
  • icons in the sidebar
  • categories from kml styleID (polys branch) - categories from KML styleID (kmz branch)
  • StyleMap rollover icon support example
  • StyleMap rollover icon in KML_Samples
  • StyleMap rollover polygon (multigeometry) support example
  • suppressInfoWindow test
  • Kml name and description on mouseover
  • name "tooltip" on polygon mouseover
  • geoxml3 parsed kml, clustered with MarkerClusterer
  • hide/show clustered markers from kml
  • line with multiple pieces
  • Google example KML MultiGeometry with multiple LineStrings
  • Linestring with multiple disconnected segments
  • Display dynamic KML (single marker moving in a circle)
  • Flight map, show route between clicked airports
  • Animate marker on polyline from KML
    • Flight path (JFK to SAN)
    • Polyline from KML
• Fusion Tables
  • Fusion Tables Users Group - Developers Guide - Reference
  • Generic GeoJSON parsing for Fusion Tables v1.0 API examples:
    • polylines
    • polygons
    • markers
    • clustered markers
    (rudimentary, under development)
  • Port of fusiontips example to the Fusion Tables API v1.0
  • gviz example code
  • Fusion Tables Map (started with this kml:Map of Africa with capitols)
  • Fusion Tables Map with sidebar
  • Capitals of the World Fusion Tables based map
  • Playing with Fusion Tables - Natural Earth dataset and sidebars (and a modified version of geoxml3)
      Italy - Greece - Albania - Georgia - UK - Russia - Israel - USA
  • Fusion Tables/Natural Earth Data Country Browser - Country Browser Using Encrypted ID (new syntax)
  • Select Multiple Countries
  • Fusion Tables Map with sidebar
  • Fusion Tables Map with sidebar, w/ polygon sidebar entries clickable
  • Fusion Tables map with custom markers (specified by the load of the layer)
  • two layer map, one infowindow - (original example, fusion tables removed)
  • three fusion layers, selected by checkboxes
  • Zoom to results of query (markers) (using GViz)
  • Zoom to results of query (kml) (using GViz)
  • Zoom to results of query (kml), multiple rows returned by query, multiple types of placemarks (using GViz)
  • Panto results of query (kml), single marker (using GViz, geoxml3)
  • Zip code labels on polygons (using GViz)
  • UK postcode polygon (using FusionTable and GViz)
  • Zoom to county (Indiana) polygon
  • Zoom to zip code polygon (Florida)
  • Point in polygon examples
    • Google example spatial query
    • Google example spatial query plus geocoded input point
    • Google example spatial query plus geocoded input point and GViz spatial query for polygon data (point in polygon)
    • CA School District example
    • Another example using a geocoded address and point in polygon analysis on polygons from a FusionTable
  • Fusion Table w/ Directions (based off this google example, and this example table (ficticious data)
  • Center initial map on data
  • create polyline from coordinates in FusionTable
  • create circles around coordinates retrieved from FusionTable
  • combine multiple rows into table in infowindow
  • Combine multiple rows, select row with dropdown (by date)
  • Filter set by radioboxes
  • clickable world map from FusionTables/NaturalEarthDataset
  • clickable world map from FusionTables/NaturalEarthDataset, KmlLayer for zoom level 0,1 so no "dots" - clickable world map using KmlLayer
    clickable US map using KmlLayer
  • ORDER BY workaround using GViz
  • ORDER BY workaround with custom (numbered) icons
  • Mouseovers on polygons from FusionTables (using GViz)
  • Interactive MBTA (Boston "T") map using FusionTables
  • change polygon color on click
  • switching marker icons defined in two columns
• Mickey Shaped Solar Farm (near Orlando) [KML] - [JSON]

Using the Google Maps API V2

Links to examples of various useful things and documentation

• Google Maps API V2 discussion group
  • Suggested Posting Guidelines (resurrected from the archives)
  • Why including a link is critical (resurrected from the archives)
• Google Maps discussion group
• Google Maps API V2 documentation
• Google Maps API Blog (Bret Taylor)
• mapki.com - Read This First
• PdMarker
• Mike Williams' Google Map API Tutorial on googlepages - Mike Williams' Google Map API Tutorial
• Doug Henderson's Google Map API examples
• w3schools XML DOM examples
• w3schools XML DOM Tutorial
• w3schools Javascript Tutorial
• w3schools Javascript examples
• W3C Markup Validation Service - from the World Wide Web Consortium (W3C)
• FEED Validator (for Atom and RSS and KML)
• JSLint (The JavaScript Code Quality Tool)
• Pretty Printer for Javascript
• kml color chooser
• kml reference
• HTTP Headers
  • web-sniffer.net
  • Rex Swain's HTTP Viewer
• Geocoding & Webservices
  • Yahoo Geocoder
  • Test Page for Yahoo Geocoder
  • Ontok Geocoder Javascript API
  • Test Page for Ontok Geocoder Javascript API
  • Earth Tools (time zone or local time, the sunrise and sunset times, and the elevation/height above sea level at a given latitude and longitude.)
• Tutorial pages
  • Mike Williams' "categories" example with category headings (order of xml file is important) - Tutorial Page: More advanced stuff - Part 25 Marker Categories
  • Google's Marker InfoWindows example with v2.x support and lat/lng display
  • Basic example from Mike Williams tutorial. Loads markers from example.xml, added error checking for "file not found" and "invalid xml file". Removed some unneeded variables.
  • A version of the above page with handling for "file not found" and "invalid xml" errors. Form post selects xml file to load.
  • A version of the above page with handling for "file not found" and "invalid xml" errors. Form post selects xml file to load. Alerts at various stages of the file load.
  • A version of the above page (v1 API) that allows different colored icons defined by the xml file (little ridefinder icons available from Google).
    [version using the V2 API]
  • A version of the above page (V1 API) that allows different colored icons defined by the xml file (normal sized colored markers).
    [version using the V2 API]
  • A version of the above page that allows different lettered icons defined by the xml file (allows the default marker and A-J, available from Google).
  • A version of the above page that allows different numbered icons defined by the xml file (allows 1-99 and the default marker).
  • A version using LabelledMarker from the open source library.
  • A version of the Mike Williams' tutorial map with numbered markers that allows different numbered icons defined by the xml file (allows 1-99 and the default marker) and polylines.
  • Basic example with polylines from Mike Williams tutorial. Loads markers and polylines from example4.xml, added error checking for "file not found" and "invalid xml file".
  • Simple example turning markers on and off with checkboxes (V1 API) using functions documented in the API.
    [version using the V2 API]
  • Simple example turning markers on and off with checkboxes. (without using xml)
  • Convex Hull example on set of random points
  • (YAEMxml) Yet Another Earthquake Map - Selectable external geoRSS earthquake feed (from earthquake.usgs.gov) in a Google map. Uses checkboxes to select displayed icons and a sidebar list of earthquakes
    [version using the V2 API (under development)]
    [test version using the latest V2 API - past day (for test)]
  • (YAEMcsv) Yet Another Earthquake Map - Selectable external csv earthquake data (from earthquake.usgs.gov) in a Google map. Uses checkboxes to select displayed icons and a sidebar list of earthquakes
    [version using the V2 API (under development)]
    [test version using the latest V2 API - last 24 hrs (for test) - last 24 hrs in Southern CA]
  • World Volcano Browser (using the Google Map API) Data from the Smithsonian Institute, Global Vulcanism Program. (under development)
    
  • Basic example of Tabbed Info Windows from XML (APIv2) (based off of information in Mike Williams Tutorials)
  • Basic example of Tabbed Info Windows with directions from XML (APIv2) (based off of information in Mike Williams Tutorials)
  • More advanced example of Tabbed Info Windows from XML (APIv2) supports "legacy" non-tabbed XML files.
  • More advanced example of Tabbed Info Windows from XML (APIv2) supports "legacy" non-tabbed XML files. This version has code to handle extra whitespace around the <![CDATA[ ... ]]> segments (only seems to be an issue in Firefox).
  • Streetview with tabs
  • Streetview with geocoding
  • Streetview with geocoding, click to change camera position
  • Link To This Page with open infoWindow and Tab (javascript)
  • Geocoding/GDirections Test Page - Geocode the start and end, then get directions, or get directions from the addresses
  • Multi-Geocode examples:
    • Bad - Doesn't work reliably - Same data, but pre-geocoded
    • Another example: Bad - Doesn't work reliably - Same data, but pre-geocoded
    • Another example (addresses from xml):
      • Bad - addresses are in xml file, but lat/lng not included
      • Good - With all the addresses pre-geocoded
  • Zoom to country using the google geocoder and a dropdown select list
  • Hurricane Browser
  • Active Volcanos of the World Tabbed Info Windows from XML (APIv2) - under development
    [version using the latest V2 API (for test)]
  • Simple APIv3 map with geocoding
• Test pages
  • Function Closure test
  • SDSDA Dance Location Map (domaindlx)
  • Arbitrary Directions (by lat/lng)
  • Arbitrary Directions V2 (by lat/lng)
  • Bus Route (polyline & stops)
  • Bio Diesel Stations in Seattle
  • B&B's (click check box to turn on/off markers)
  • Test GeocodeZip
  • Saves center/zoom level between sessions
  • icons defined by xml
  • xml parser (uses espx.js library)
  • &ll= support for Google Map format
  • load multiple xml files in "parallel"
  • frapper (xmlDoc.parseError)
  • Map of the country of Georgia (UN Map overlaid on Google Map)
• Maps
  • Elevation of ground Ground Elevation Graph for polyline from xml
  • I5 in CA (normal polyline) - I5 in CA (encoded polyline)
  • I80 San Francisco, CA to New York, NY (encoded polyline)
  • F-18 Crash Site in University City (San Diego) CA
  • Port Richmond Amtrack crash near Philadelphia
  • Steve Fossett Crash Site
  • Germanwings 9525 Crash Site
  • Cleveland National Forest
  • Joshua Tree National Park
  • Planes near Balboa Park - 1 - 2
  • Angel Island State Park
  • Anza-Borrego State Park
• other interesting pages
  • Volcanos In The News
  • XML Node Types (local version)
  • lat/lng finder - local version (with interface to Ontok Geocoder)
  • regional map of Oom Yung Doe Schools (3 locations)
  • single school map - Hillcrest School of Oom Yung Doe (works from 2 different domains: this is the second)
  • single school map - Encinitas School of Oom Yung Doe (works from 2 different domains: this is the second)
  • single school map - Mission Viejo School of Oom Yung Doe (works from 2 different domains: this is the second)
  • ACME GeoRSS Map Viewer