Google Maps API
My Google Maps JavaScript examples implement various features of the Google Maps API and the Google Earth Plug-in API.
- » GoogleMap
- Basic example for getting map directions
- » GoogleMap2
- Advanced example for full-page printing, drawing waypoints, more
- » GoogleMoon
- Google map of the Earth's moon
- » GoogleMars
- Google map of Mars
Note: If you are using Internet Explorer 8 Beta, the map navigation controls on these pages may not work unless you view in "compatibility mode".
GoogleMap
GoogleMap is a simple example of a fixed-size road map that allows users to find a location and get directions to it from another address.
- Start From
- Enter a street address, location name or longitude, latitude and click the Find button. If Google finds the location, it is marked on the map and the Find button changes to "Get Directions"
- Get Directions
- Enter another location in the "Start From" field and click the Get Directions button. If Google finds the starting location, the path will be marked on the map and the text directions will be displayed in a box to the right.
- Clear Markers
- Click the Clear button to remove all markers.
GoogeMap also can be used in a link on a Web page or e-mail initialized with a query string to a specific location. Users then can enter a starting address and get custom directions to the marked location. See the GoogleMap Query-String Reference for details and examples.
GoogleMap2
GoogleMap2 is an advanced Google Maps API example that allows resizing the map, hiding markers and other display components, and drawing measured waypoints on the map in various colors. It also can be initialized with a query-string from a Web-page or e-mail link with more flexibility and options than the basic example described above.
- Find Location
- Google Maps can use place-name, address or latitude/longitude to center the map and zoom to the requested location.
-
- Enter a location name or street address, city, st/country for Google Maps to find. If the location is found in Google's database, the map is centered there and marked with a red balloon.
- Enter a latitude and longitude, either as degree,minute,second or in decimal format. Google centers the map at this location and marks it with a red balloon.
- Get Latitude/Longitude
- Whenever the map is moved, the current latitude and longitude of the map center is displayed below the map. This feature can be disabled in the Options if desired.
- Get/Set Zoom Level
- Script on the example page uses API functions to get the current zoom level and set it when changing the map location.
- Draw Waypoints
- Google Maps API allows you to draw lines on the map and calculate the distance between two points. My example places a marker at each waypoint and displays the current and cumulative distance in an information bubble.
- On my map demonstration page, click the Show Options button to enable waypoint-drawing and choose a drawing color. Methods are available to remove the last waypoint )and line segment) or remove the entire drawing from the map.
- Note: Internet Explorer 8 requires "compatibility mode" to draw waypoints correctly.
In addition to implementing Google Maps API functions, GoogleMap2 includes other features to enhance use of the map. Click the Show Options button to access settings for these features.
- Keep current zoom when changing location
- Uncheck this option to cause the map zoom level to be reset to the default when finding a new location.
- Show latitude, longitude
- Uncheck this option to hide the current center-of-map latitude, longitude and zoom caption below the map.
- Show location marker
- Display of the balloon location markers can be disabled. Markers already displayed can be removed by clicking the Clear button.
- Resize Map
- The example includes different ways to size the map:
- fit-to-screen (the default)
- 8½" x 11" portrait and landscape orientations suitable for full-page printing
- large and small pre-sized squares
- custom user-input height and width
- The height and width fields are updated with the current map size whenever it is resized. To set a custom size, type in the height and width, then click the "Custom" option (even if it is selected already.)
- Query Initialization/Create URL
- The example provides a method to create hyperlinks to the map page that automatically set the map size, location, zoom and marker when the page is loaded. Links can be placed on Web pages or in e-mail as a convenient way to share specific locations and views with others.
- To create a link, position and zoom the map to show the desired view, then click the Create URL button in the Options section. The link with current settings will be displayed below the map and can be copied and pasted for further use.
- See the Query-String Parameter Reference for details and examples for creating map initialization links.
