<?xml version='1.0' encoding='UTF-8'?>
<section>
	<sectioninfo>
		<keywordset>
			<keyword>map</keyword>
			<keyword>gmapVar</keyword>
			<keyword>HtmlGmap</keyword>
		</keywordset>
	</sectioninfo>

	<table>
		<title>Component identification parameters</title>
		<tgroup cols="2">
			<thead>
				<row>
					<entry>Name</entry>
					<entry>Value</entry>
				</row>
			</thead>
			<tbody>
				<row>
					<entry>component-type</entry>
					<entry>org.richfaces.Gmap</entry>
				</row>
				<row>
					<entry>component-class</entry>
					<entry>org.richfaces.component.html.HtmlGmap</entry>
				</row>
				<row>
					<entry>component-family</entry>
					<entry>org.richfaces.Gmap</entry>
				</row>
				<row>
					<entry>renderer-type</entry>
					<entry>org.richfaces.GmapRenderer</entry>
				</row>
				<row>
					<entry>tag-class</entry>
					<entry>org.richfaces.taglib.GmapTag</entry>
				</row>
			</tbody>
		</tgroup>
	</table>

	<section>
		<title>Creating the Component with a Page Tag</title>
		<para>
			To create the simplest variant on a page use the following
			syntax:
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[...
    <rich:gmap gmapKey="..."/>
...
]]></programlisting>
	</section>
	<section>
		<title>Creating the Component Dynamically Using Java</title>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlGmap;
...
HtmlGmap myMap = new HtmlGmap();
...
]]></programlisting>
	</section>
	<section>
		<title>Details of Usage</title>
		<para>
			To use
			<emphasis>
				<property>Google Map</property>
			</emphasis>
			in your application, generate a key on
			<ulink url="http://google.com/apis/maps">
				Google Map official resource
			</ulink>
			. One key could be used for one directory on the server.
		</para>
		<para>
			Here are the main settings of initial rendering performed
			with a component
			<property>map</property>
			that are accessible with the following attributes:
		</para>
		<itemizedlist>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;zoom&quot;</property>
					</emphasis>
					defines an approximation size (boundary values 1-18)
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;lat&quot;</property>
					</emphasis>
					specifies an initial latitude coordinate in degrees,
					as a number between -90 and +90
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;lng&quot;</property>
					</emphasis>
					specifies an initial longitude coordinate in
					degrees, as a number between -180 and +180
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>&quot;mapType&quot;</property>
					</emphasis>
					specifies a type of a rendered map (<code>G_NORMAL_MAP</code>,
					<code>G_SATELLITE_MAP</code> (DEFAULT), <code>G_HYBRID_MAP</code>)
				</para>
			</listitem>
		</itemizedlist>
		<para>
			For example, the city of Paris is shown after rendering with
			the following initial settings:
			<code>lat = &quot;48.44&quot;</code>
			,
			<code>lng = &quot;2.24&quot;</code>
			and
			<code>zoom = &quot;5&quot;</code>
			.
		</para>
		<figure>
			<title>
				<emphasis role="bold">
					<property>&lt;rich:gmap&gt;</property>
				</emphasis>
				initial rendering
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/gmap2.png" />
				</imageobject>
			</mediaobject>
		</figure>
		<para>
			It&apos;s also possible to set accessible controls on the
			<property>map</property>
			with the help of the attributes:
		</para>
		<itemizedlist>
			<listitem>
				<para>
					<emphasis>
						<property>
							&quot;showGMapTypeControl&quot;
						</property>
					</emphasis>
					determines whether the controls for a map type
					definition are switched on
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>
							&quot;showGScaleControl&quot;
						</property>
					</emphasis>
					determines whether the controls for scaling are
					switched on
				</para>
			</listitem>
			<listitem>
				<para>
					<emphasis>
						<property>
							&quot;showGLargeMapControl&quot;
						</property>
					</emphasis>
					determines whether the control for
					<property>map</property>
					scale rendering is rendered
				</para>
			</listitem>
		</itemizedlist>
		<figure>
			<title>
				<emphasis role="bold">
					<property>&lt;rich:gmap&gt;</property>
				</emphasis>
				accessible controls
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/gmap3.png" />
				</imageobject>
			</mediaobject>
		</figure>
		<para>
			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
			<property>map</property>
			in the
			<emphasis>
				<property>&quot;gmapVar&quot;</property>
			</emphasis>
			attribute and then call the object directly with API
			<emphasis>
				<property>Google Map</property>
				.
			</emphasis>
		</para>
		<para>
			For example, to approximate a map for
			<code>gmapVar = &quot;map&quot;</code>
			declared inside the component, call <code>map.zoomIn()</code> on an
			event.
		</para>
		<para>
			Moreover, to add e.g. some JavaScript effects, events
			defined on it are used.
		</para>
		<itemizedlist>
			<listitem>
				<para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para><emphasis><property>&quot;onclick&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para>
			</listitem>
			<listitem>
				<para>etc.</para>
			</listitem>
		</itemizedlist>

		<note>
			<para>
				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:
			</para>
			<programlisting role="XML"><![CDATA[...
<f:view contentType="text/html">...</f:view>
...
]]></programlisting>
		</note>

	</section>
	<section>
		<title>Look-and-Feel Customization</title>
		<para>
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			component isn&apos;t tied to skin parameters, as there is no
			additional elements on it, except the ones provided with
			<emphasis>
				<property>Google Map</property>
				.
			</emphasis>
		</para>
	</section>

	<section>
		<title>Definition of Custom Style Classes</title>
		<table id="gC">
			<title>
				Classes names that define a component appearance
			</title>
			<tgroup cols="2">
				<thead>
					<row>
						<entry>Class name</entry>
						<entry>Description</entry>
					</row>
				</thead>
				<tbody>
					<row>
						<entry>rich-gmap</entry>
						<entry>
							Defines styles for a wrapper &lt;div&gt;
							element of a component
						</entry>
					</row>
				</tbody>
			</tgroup>
		</table>

		<para>
			In order to redefine styles for all
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			components on a page using CSS, it&apos;s enough to create
			classes with the same names (possible classes could be found
			in the tables
			<link linkend="gC">above</link>
			) and define necessary properties in them.
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="CSS"><![CDATA[...
.rich-gmap{
    font-style:italic;
}
...]]></programlisting>

		<para>This is a result:</para>

		<figure>
			<title>Redefinition styles with predefined classes</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/gmap_pc.png" />
				</imageobject>
			</mediaobject>
		</figure>

		<para>
			In the example the font style for buttons was changed.
		</para>

		<para>
			Also it&apos;s possible to change styles of particular
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			component. In this case you should create own style classes
			and use them in corresponding
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			<property>styleClass</property>
			attributes. An example is placed below:
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="CSS"><![CDATA[...
.myClass{
    font-weight:bold;
}
...]]></programlisting>
		<para>
			The
			<emphasis>
				<property>&quot;styleClass&quot;</property>
			</emphasis>
			attribute for
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			is defined as it&apos;s shown in the example below:
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[<rich:gmap ... styleClass="myClass"/>
]]></programlisting>

		<para>This is a result:</para>

		<figure>
			<title>
				Redefinition styles with own classes and
				<emphasis>
					<property>&quot;styleClass&quot;</property>
				</emphasis>
				attributes
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/gmap_oc.png" />
				</imageobject>
			</mediaobject>
		</figure>

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



	</section>
	<section>
		<title>Relevant Resources Links</title>
		<para>
			<ulink
				url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=gmap">
				On the component Live Demo page
			</ulink>
			you can see the example of
			<emphasis role="bold">
				<property>&lt;rich:gmap&gt;</property>
			</emphasis>
			usage and sources for the given example.
		</para>
	</section>

</section>
