Demonstrations - HTML 5 Geolocation Services & Google Maps

Introduction to Google Maps Fundamentals


API Key: Obtain an API key to use the Google Maps API and display maps.

Multiple Maps: Display multiple maps in different div tags.

Zoom Levels: Change the zoom levels of various maps.

Types of Maps: There are four different types of maps -- ROAD, SATELLITE, HYBRID, & TERRAIN -- that could be displayed.

Overlays - Objects on Maps that are Bound to Specific Coordinates.


Markers: Add markers to maps to accentuate locations.

Multiple Markers: Several markers could be placed on maps.

Information Windows: Information windows are used to display more information about particular locations.

Animated Markers: Animated markers are used to further accentuate particular locations.

Icons for Markers: Use images instead of the standard markers to express different meanings.

Polylines: Polylines provide a way to specify travel paths..

Polygons: Polygons provide an easy way to accentuate regions with shading and boundaries.

Circles: Circles provide an easy way to specify a radius around a particular location.

Displaying Coordinates and Google Maps Fundamentals


The following demonstrations might not work due to the server settings. Download each of the demonstrations (html & css files), and run them locally. The browser settings must be set to allow access to your position. In Google Chrome, open the Settings, scroll to the bottom and choose Show Advanced Settings, and click the button for Content Settings in the Privacy section. Choose an option under location:
- Allow sites to track your physical location.
- Ask when a site tries to track your physical location (recommended).

Geolocation Basics: Display the end users coordinates with HTML 5 Geolocation Services.

Displaying a Position on Google Maps: Display the position determined in the previous example on a map using Google Maps as a third party solution.

Markers and Information Windows: Add a marker to the previous demonstration to specify the user's exact location on the map, and display it on an information window.

Multiple Markers and Information Windows: Add more markers to the previous demonstration to specify the users' exact locations on the map, and display them on an information window.