<section role="NotInToc" id="rich_gmap">
   <title>
				&lt;
				rich:gmap
				&gt;
				<emphasis role="since">
         <superscript> available since <emphasis role="version">3.0.0</emphasis>
         </superscript>
      </emphasis>
   </title>
   <section>
      <title>Description</title>
      <para>Component that presents the Google <property>map</property> in the JSF applications.</para>
      <figure>
        <title>
            <emphasis role="bold">
               <property>&lt;rich:gmap&gt;</property>
            </emphasis> component</title>
         <mediaobject> 
            <imageobject>
               <imagedata fileref="images/gmap_init.png"/>
            </imageobject>
         </mediaobject>
	     </figure>
    </section>
   <section>
      <title>Key Features</title>
      <itemizedlist>
        <listitem>
            <para>Presents all the Google <property>map</property> functionality</para>
         </listitem>
        <listitem>
            <para>Highly customizable via attributes</para>
         </listitem> 
        <listitem>
            <para>No developers JavaScript writing needed to use on a pages</para>
         </listitem>
      </itemizedlist>
   </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>"zoom"</property>
					          </emphasis>
					defines an approximation size (boundary values 1-18)
				</para>
			      </listitem>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>"lat"</property>
					          </emphasis>
					specifies an initial latitude coordinate in degrees,
					as a number between -90 and +90
				</para>
			      </listitem>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>"lng"</property>
					          </emphasis>
					specifies an initial longitude coordinate in
					degrees, as a number between -180 and +180
				</para>
			      </listitem>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>"mapType"</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 = "48.44"</code>
			,
			<code>lng = "2.24"</code>
			and
			<code>zoom = "5"</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's also possible to set accessible controls on the
			<property>map</property>
			with the help of the attributes:
		</para>
		    <itemizedlist>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>
							"showGMapTypeControl"
						</property>
					          </emphasis>
					determines whether the controls for a map type
					definition are switched on
				</para>
			      </listitem>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>
							"showGScaleControl"
						</property>
					          </emphasis>
					determines whether the controls for scaling are
					switched on
				</para>
			      </listitem>
			      <listitem>
				        <para>
					          <emphasis>
						            <property>
							"showGLargeMapControl"
						</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 the controls as well as to perform other activities (Zoom
			In/Out etc.) is possible with your JavaScript, i.e. declare
			a name of a <property>map</property> object in the
			<emphasis>
				        <property>"gmapVar"</property>
			      </emphasis>
			attribute and then call the object directly with
			<emphasis>
				        <property>Google Maps</property>
			      </emphasis> API.
		</para>
		
		    <para>
			For instance, if you have <code>gmapVar = "map"</code> declared for your component, to zoom in a map you should call <code>map.zoomIn()</code> on an
			event. See also an example of <emphasis role="bold">
				        <property>&lt;rich:gmap&gt;</property> 
			      </emphasis> usage on the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=gmap">RichFaces Live Demo</ulink>.
		</para>
		
		    <tip>
			      <title>Tip:</title>
			      <para>You do not need to use reRender to perform uptades for the <emphasis role="bold">
				           <property>&lt;rich:gmap&gt;</property>
			         </emphasis> component. Use the <emphasis>
				           <property>"gmapVar"</property>
            </emphasis> attribute and 
				<ulink url="http://code.google.com/intl/ru/apis/maps/documentation/reference.html">Google Maps native API</ulink> instead as it's described above.</para>
		    </tip>
		
		    <para>
			Moreover, to add e.g. some JavaScript effects, events
			defined on it are used.
		</para>
		    <itemizedlist>
			      <listitem>
				        <para>
               <emphasis>
                  <property>"onmouseover"</property>
               </emphasis>
            </para>
			      </listitem>
			      <listitem>
				        <para>
               <emphasis>
                  <property>"onclick"</property>
               </emphasis>
            </para>
			      </listitem>
			      <listitem>
				        <para>
               <emphasis>
                  <property>"onmouseout"</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>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/gmap.html">Table of 
							&lt;rich:gmap&gt; 
							 attributes</ulink>.
						</para>
      <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>
      <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>
							You can find all necessary information about style classes redefinition in 
						<link linkend="customstyles">Definition of Custom Style Classes</link> 
							section.
						</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>
