More on the AJAX Map Viewer Tutorial

A customer noticed a display problem with the Map Viewer component in the Firefox browser. The text in the "balloon" for the Map Marker component displays one word per line. So instead of

 This is the place!

as shown in the following figure, the text displays as

    This
    is
    the 
    place! 
 
Figure 1: Map with Map Marker
Figure 1: Map Viewer Application
 
The fix is to use non-breaking spaces ( ) in the markup property for the Map Marker component. The non-breaking spaces prevent the text from breaking onto multiple lines due to the limited space allotted for the text.

So for the example above, you would do the following:

  1. From the BluePrints AJAX Support Beans section of the Palette, drag a Map Marker component and drop it anywhere on Page1.

  2. In the Properties window for mapMarker1, set set the markup property to This is the place!

For a complete example, see the Map Viewer tutorial.

You can also set the non-breaking spaces programmatically. Here is the code that Matthew Bohn uses for the Map Viewer component in the component catalog to replace all spaces with non-breaking spaces ( ).

      public String button1_action() {
       ...
               String m = formatMarker(userPoint.toString());
               MapMarker marker = new MapMarker(latitude, longitude, m);
               this.mapViewer1.setMarkers( new MapMarker[] {marker} );
       ...
   }
      private String formatMarker(String text) {
       text = "<b>" + text + "</b>";
       text = "Location shown: <br/>" + text;
       text = text.replaceAll(" ", "&nbsp;");
       return text;
   }

Several customers have asked how to customize the controls in the Map Viewer component. For customization information, see the Custom Map Controls section of the Google Maps API Version 2 Documentation..

Comments:

I had this issue when I was setting up a demo recently as well. I solved it by simply wrapping my markup text inside a "<pre>" tag. Also, since I didn't notice it right off, the markup property is actually taking HTML as the data type. You can do all kind of fun things with links and such with this single property.

Posted by John Brock on September 20, 2006 at 08:01 AM PDT #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today