|
Google:maps
Examples, 'cause it just makes things easier
Here we will attempt to provide an example map (including corresponding JSP code) to
demonstrate each tag in the Google:maps taglibrary, culminating in a final map that will
exploit each and every capability.
We won't go into a ton of explanation on each one. If we've done our job it'll be
pretty self explanatory. The last example page demonstrates the use of JSTL and the Google:maps
libraries together to generate dynamic, database driven maps, 'cause at the end of the day
it's just plain wicked cool.
For best results, we recommend following each map example in order. You'll build
understanding on each page, skipping around will just make it take longer.
Basic Maps Tutorial
- Example 1
- This is the most basic map you can make. No user controls, just a single marker
- Example 2
- Here we expand on example 1 by adding an infowindow to the marker to
display the address.
- Example 3
- Now that we've got a little something, in this example we'll add the user controls
for zooming, panning and mousewheel control.
- Example 4
- In this example, we'll add a 10 mile radius circle around our marker, and we'll add a map scale.
- Example 5
- Now we'll add a second marker, using a custom icon, and connect the two markers with a polyline.
- Example 6
- Next, we'll draw a 25 mile radius circle to the second marker and draw a box to connect
the two markers.
Advanced Maps Tutorial
- Example 7
- Here we will begin learning about the map events and how they interact with your
web application.
- Example 8
- Here we'll add all the available map events to see how they work.
- Example 9
- We'll create a map with events that use JavaBeans to process the events.
- Example 10
- Now we'll create a simple servlet to accept and process map events.
- Example 11
- This example will allow users to draw a polyline on the map by clicking around.
- Example 12
- This last example will demonstrate how asynchronous events work versus synchronous events.
We'll provide some on-screen components that will receive events and update, without reloading the page.
Miscellaneous Examples
- Example 13
- This example demonstrates the new <googlemaps:traffic> tag which allows you to
locate and display traffic delays within a specified radius.
- Example 14
- Here we generate a rather simple map with 10 markers that are generated from
addresses in a database by integrating JSTL with the Google Maps JSP Taglibrary.
- Example 15
- You asked for it, and now you've got it, XML support! This map shows this new
capability, as well as a link to the DTD used and an example XML file.
- Example 16
- This advanced example demonstrates the new custom map type feature. To use custom maps, you'll need to provide a TileServer
and learn how to make matched tiles.
- Example 17
- This map shows how to use the new overviewControl tag to display a small overview map inside
your Google Map.
- Example 18
- Here we show you the new tabbed info window capabilities.
- Example 19
- Got too many markers? Your map won't load, or they're just too darned close together?
This page demonstrates marker clustering using Jef Poskanzer's Clusterer.js script.
- Example 20
-
Google Maps JSP Taglibrary now supports WMS maps. Now you can import map data from hundreds of
free WMS servers and add them to your Google Map map type controls.
- Example 21
-
You can now utilize a debugger in version 2 maps. The debugger displays status information in a small
pop-up window.
- Example 22
-
Now you can add labels to your maps. <googlemaps:label> tags work like <googlemaps:imageoverlay> tags except
they move with the map and are located using a <googlemaps:point> tag. You can use them instead of markers, or over makers
in place of infowindows.
- Example 23
-
With version 2 maps, you can now create draggable markers and add two new event listeners
('dragstart' and 'dragend') to your markers.
- Example 24
-
You can now provide users with a 'headless' map display for version 2 maps. With 'headless'
mode on, user controls are hidden until the cursor enters the map area.
- Example 25
-
As of version 0.95 you can now limit just how far in or out users can zoom on your maps. See how...
- Example 26
-
Ever wished you could constrain people's map movement to just the area that your map
covers? Well now you can restrict the map to
pan only enough to show the points you've added to the map.
- Example 27
-
This example demonstrates the new image insert tag. This tag allows you to "attach" an image to
a map. This image pans with the map, and even zooms in and out with the map. Useful for adding
details like bodies of water, new/missing roads, etc. to maps.
- Example 28
-
Are you writing an application where end user need to know cursor coordinates? Now you can,
using the <googlemaps:coordinates> tag.
- Example 29
-
Now you can show where day and night are on your google maps, courtesy of daylightmap.com.
Simply set the showDaylight attribute of your map to "true".
- Full Page Maps
-
Here's an example of a full page map. Simply do the following:
- Do not specify width or height in your <googlemaps:map> tag.
- Specify the following style in your <googlemaps:div> tag:
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
- Specify the following style in your <body> tag:
style="width: 100%; height: 100%; margin: 0; padding: 0;"
You now have full-screen mapping.
- Drag-A-Map
- Drag your map around the screen using the Drag and Drop
DHTML script provided by Walter Zorn.
Well we've just about hit the basics, what's the conclusion?
|
