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

Here is a simple example as it could be used on a page:

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.

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

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.

## 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 class with the same name and define necessary properties in it.

To change styles of particular <rich:gmap> components, define your own style class in the corresponding <rich:gmap> attribute.

## Relevant Resources Links

Here you can see the example of <rich:gmap> usage and sources for the given example.