Google Map Examples
Marker Examples: Sized Markers Colored Markers InfoWindow
Polyline Examples: Polylines Polyline Arrays
Polygon Examples: Polygons Polygon Arrays Coloring Polygons from data
Map Legends Examples: Map and Legend HTML5 Legend SVG Legend
List Display Examples: Simple Static List Dynamic List
Tree Display Examples: Simple Tree Menu
Polygon Array Example with HTML5 legend and simple tree menu for plant data
Polygon Array Example with HTML5 legend using Census Data
infoWindow Example with Dynamic List of Data
Detailed directions for acquiring and using census data on maps
- Google Maps v3 is a wonderful tool for embedding interactive maps in web solutions.
- This version has been optimized for mobile devices, such as cellular phones with web browsers.
- Another change over previous incarnations of the API is its lack of need for a license key.
- If you will be developing with the intention of free use for consumers, v3 is the choice for you. If your plans include any sort of paid service you will be required to obtain a license key from Google and use v2 for the time being.
- With a little bit of scripting knowledge you will be well on your way to creating exciting webpages!
- See the documentation and tutorials available at:
- http://code.google.com/apis/maps/documentation/javascript/basics.html
Marker Examples: Sized Marker Example
Markers can be sized according to values you choose. This could be a useful tool for pin-pointing populations on a map and showing their size relative to other populations that are on the map as well.
See the HTML and JavaScript code and the Google Gadget implementation.
Marker Examples: Colored Marker Example
Colored markers are another useful tool. While a sized marker might be used to show relative population size, a colored marker could be used to show diverse populations.
See the HTML and JavaScript code and the Google Gadget implementation.
Marker Examples: InfoWindow Example
Additional information about the population at a specific marker can be supplied in a popup information window. This is accomplished by adding a click listener to each marker and supplying appropriate information for the popup.
See the HTML and JavaScript code and the Google Gadget implementation.
Polyline Examples: Simple Polyline Example
Simple geometric shapes can be defined and drawn on the map.
See the HTML and JavaScript code and the Google Gadget implementation.
Polyline Examples: Polyline Array Example
This example uses AJAX to input points from a CSV file and creates an array of county border points and uses the array to draw the outline of all of the counties in the state.
See the HTML and JavaScript code and the Google Gadget implementation.
Polygon Examples: Simple Polygon Example
Using polygon rather than polyline allows you to fill areas.
See the HTML and JavaScript code and the Google Gadget implementation.
Polygon Examples: Polygon Array Example
This is the polyline array example modified to include fillColor and fillOpacity displays.
See the HTML and JavaScript code and the Google Gadget implementation.
Polygon Examples: Coloring Polygons from Data Values
This example uses additional information in the data file to choose a color. It also provides the option of centering the map at the users' current position using the geolocation features to center the map.
See the HTML and JavaScript code and the Google Gadget implementation.
Map Legends
A legend can be useful to explain the color choices as this example shows
See the HTML and JavaScript code and the Google Gadget implementation.
Map Legends: HTML5 Legend
The legend can be created using the HTML5 Canvas element. This simple example draws a legend across the top of the screen.
The HTML5 Canvas element requires this additional javascript file to display the HTML5
See the HTML and JavaScript code and the Google Gadget implementation.
Map Legends: SVG Legend
The legend can also be created using SVG.
Dynamic display of list/tree structured information
This example shows a simple static list display and a display constructed from information in a JSON file.
Dynamic List using jQuery dynatree
This example uses the jQuery based view control dynatree by Martin Wendt available at wwWendt.de
The previous infowindow example can be enhanced with customized icons and the dynamic information display
See the HTML and JavaScript code and the Google Gadget implementation.
Dynamic List using Simple Tree Menu
This example uses the Simple Tree Menu from Dynamic Drive to display a simple UL list as a dynamic tree
See the HTML and JavaScript code and the Google Gadget implementation.
Polygon Array Example with HTML5 legend and dynamic listing of county data
This example combines polygons with the HTML5 legend and Simple Tree Menu
See the HTML and JavaScript code and the Google Gadget implementation.
Polygon Array Example with HTML5 legend using Census data
This example combines markers, infoWindows, and a HTML5 legend.
See the HTML and JavaScript code and the Google Gadget implementation.
infoWindow Example with Dynamic Listing of Data
This example has a main page, table page and map page. The map combines markers, infoWindows, Simple Tree Menu and a search box. (Note: The infoWindow is incorrectly sized in InternetExplorer 8.)
See the HTML and JavaScript code and the Google Gadget implementation.
Detailed directions for Acquiring and Using Census Data on Maps
This example explains in detail how to acquire and use census data to create a map. The map combines markers, infoWindows, and an HTML5 legend..
See the HTML and JavaScript code and the Google Gadget implementation.
