map gmapVar HtmlGmap

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.Gmap
component-class | org.richfaces.component.html.HtmlGmap
component-family | org.richfaces.Gmap
renderer-type | org.richfaces.GmapRenderer
tag-class | org.richfaces.taglib.GmapTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...
        <rich:gmap gmapKey="..."/>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlGmap;
    ...
    HtmlGmap myMap = new HtmlGmap();
    ...

## Details of Usage

To use Google Map in your application, generate a key on Google Map official resource . One key could be used for one directory on the server.

Here are the main settings of initial rendering performed with a component map that are accessible with the following attributes:

- "zoom" defines an approximation size (boundary values 1-18)

- "lat" specifies an initial latitude coordinate in degrees, as a number between -90 and +90

- "lng" specifies an initial longitude coordinate in degrees, as a number between -180 and +180

- "mapType" specifies a type of a rendered map (`G_NORMAL_MAP`, `G_SATELLITE_MAP` (DEFAULT), `G_HYBRID_MAP`)

For example, the city of Paris is shown after rendering with the following initial settings: `lat = "48.44"` , `lng = "2.24"` and `zoom = "5"` .

<rich:gmap> initial rendering

It's also possible to set accessible controls on the map with the help of the attributes:

- "showGMapTypeControl" determines whether the controls for a map type definition are switched on

- "showGScaleControl" determines whether the controls for scaling are switched on

- "showGLargeMapControl" determines whether the control for map scale rendering is rendered

<rich:gmap> accessible controls

To set all these parameters and perform some activity (Zoom In/Out etc.) is possible with your JavaScript, i.e. declare a name of an object on a map in the "gmapVar" attribute and then call the object directly with API Google Map .

For example, to approximate a map for `gmapVar = "map"` declared inside the component, call `map.zoomIn()` on an event.

Moreover, to add e.g. some JavaScript effects, events defined on it are used.

- "onmouseover"

- "onclick"

- "onmouseout"

- etc.

Google Map does not support XHTML format of the page. Thus, if you use Facelets and JSF 1.2, do not forget to put the following tags somewhere on the page:

    ...
    <f:view contentType="text/html">...</f:view>
    ...

## Look-and-Feel Customization

<rich:gmap> component isn't tied to skin parameters, as there is no additional elements on it, except the ones provided with Google Map .

## Definition of Custom Style Classes

Classes names that define a component appearance

Class name | Description
--- | ---
rich-gmap | Defines styles for a wrapper <div> element of a component

In order to redefine styles for all <rich:gmap> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above ) and define necessary properties in them.

Example:

    ...
    .rich-gmap{
        font-style:italic;
    }
    ...

This is a result:

Redefinition styles with predefined classes

In the example the font style for buttons was changed.

Also it's possible to change styles of particular <rich:gmap> component. In this case you should create own style classes and use them in corresponding <rich:gmap> styleClass attributes. An example is placed below:

Example:

    ...
    .myClass{
        font-weight:bold;
    }
    ...

The "styleClass" attribute for <rich:gmap> is defined as it's shown in the example below:

Example:

    <rich:gmap ... styleClass="myClass"/>

This is a result:

Redefinition styles with own classes and "styleClass" attributes

As it could be seen on the picture above, the font weight for buttons was changed.

## Relevant Resources Links

On the component Live Demo page you can see the example of <rich:gmap> usage and sources for the given example.