My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
HowToUseTheLibrary  

Featured
Updated Sep 1, 2011 by Hazem.sa...@gmail.com

How to configure the library:

  • Place the the latest library jar in your web application WEB-INF/lib folder.
  • Include the tag library in your JSF page as follows:
  •  <%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m" %>
and NEVER forget to include the Google maps script include in your page HEAD tag like:
<script

src="http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS9AOPy_YJl48ifAy4mq6I8SgK8fg"
type="text/javascript">

</script>     
  • Done!!!

Example of usages:

  • To create a simple map (Using longitude and latitude), do the following:
  •  <m:map width="500px" height="500px" latitude="30.01" longitude="31.14" />

This will create a simple map of height = 500px and width = 500px, and the map will point to latitude = 30.01 and longitude = 31.41.

  • To create a map with markers and HTML information windows, do the following:
  •  <m:map width="500px" height="500px" latitude="30.01" longitude="31.14">
    
        	<m:marker latitude="30.01" longitude="31.14"/>
    
        	<m:htmlInformationWindow latitude="30.01" longitude="31.14" 
    
        	htmlText="<B>Egypt</B>"/>
    
    </m:map>

This will add a marker and an HTML information window to your map at latitude = 30.01 and longitude = 31.41, and the HTML information window will display the value in the (htmlText) attribute.

  • To create a simple map (Using address), do the following:
  •   <m:map address="#{addressBean.address}">
    	 <m:marker/>
    	 <m:htmlInformationWindow htmlText="#{addressBean.address}"/>
      </m:map>

This will create a simple map that will point to the specific address with the marker and an information window containing the address.

  • To add controls to your map, use the <m:mapControl .../> tag:
  •     	<m:map width="500px" height="500px" latitude="30.01" longitude="31.14">
        	       <m:mapControl name="GLargeMapControl" position="G_ANCHOR_BOTTOM_RIGHT"/>
        	       <m:mapControl name="GMapTypeControl"/>    			
        	</m:map>

This will add two controls on the map. The first control is the (GLargeMapControl) -its position will be in the bottom right of the map- , and the second control is the (GMapTypeControl) which enables switching between map types.

  • To attach events to your map or marker, use the <m:eventListener.../> tag:
  •     <m:map width="90%" height="90%" latitude="24" longitude="15">   			
    	<m:eventListener eventName="moveend" jsFunction="mapMoveEndHandler"/>		
        </m:map>

This will create an event listener to the map, which will execute the (mapMoveEndHandler) function when the map (moveend) event occurs.

  • To attach a polygon (a closed set of lines) to your map, use the <m:polygon .../> tag:
  •    	<m:polygon lineWidth="4">
       		<m:point latitude="30.01" longitude="31.14"/>
       		<m:point latitude="-33" longitude="19"/>    				
       		<m:point latitude="39" longitude="-101"/>  	
       		<m:point latitude="30.01" longitude="31.14"/>
        	</m:polygon>

This will attach a polygon of the listed four points to the map. Note that the first point should be the same as the last one.

  • To attach a polyline (an opened set of lines) to your map, use the <m:polyline .../> tag:
  •     	<m:polyline>
        		<m:point latitude="30.01" longitude="31.14"/>
        		<m:point latitude="-33" longitude="19"/>    				
        		<m:point latitude="39" longitude="-101"/>
        	</m:polyline>

This will attach a polyline of the listed three points to the map.

  • To attach an image to your map, use the <m:groundoverlay .../> tag:
  •     <m:map width="90%" height="90%" latitude="24" longitude="15" zoom="2">
                     <m:groundoverlay imageURL="http://www.jroller.com/HazemBlog/resource/gmaps4jsf-logo.png" 
                      startLatitude="7" endLatitude="23" 
        		  startLongitude="-54" endLongitude="84" />    			
        </m:map>

This will attach the GMaps4JSF logo to the map, placing the image in the box starting from latlng(7, -54), and ending at latlng(23, 84).

  • To create a street view panorama, use the <m:streetViewPanorama .../> tag:
  •     <m:streetViewPanorama width="500px" height="500px" 
        			  latitude="42.345573" longitude="-71.098326" />
    

This will create a simple street view panorama of height = 500px and width = 500px, and the panorama will point to latitude = 42.345573 and longitude = -71.098326.

  • For more information about how to use the several components, please see the examples in the demo, and the tag library documentation.
Comment by bt2...@gmail.com, Oct 16, 2008

map still not showing up

Comment by sheldons...@gmail.com, Oct 17, 2008

I used this API on Google Maps' China service http://ditu.google.com/... Many of the tags do not work, such as showing the map control, and using jsVariable to refer the map. (Same code works for maps.google.com service.) Do you know if this is because ditu.google.com does not provide the full API that maps.google.com offers?

Sheldon

Comment by aris...@hotmail.com, Nov 26, 2008

I used the library at my Jboss Seam project. I changed the web.xml to support facelets and although it seems to transact with google.com the map is still not showing up. I don't know if this is an issue so I posted it here. Any idea?

Comment by project member Hazem.sa...@gmail.com, Nov 26, 2008

@aris: I will make a sample on JBoss seam and upload it soon! Thanks for telling us.

Comment by aris...@hotmail.com, Nov 26, 2008

Thanks for the really fast reply. Looking forward...

Comment by chad.r...@gmail.com, Dec 5, 2008

This is caused by the jar not conforming to facelets taglib rules: https://facelets.dev.java.net/nonav/docs/dev/docbook.html#taglib-web

Just open the jar and rename gmaps4jsf-facelets.xml to gmaps4jsf.taglib.xml and the tag will be properly parsed. Now for the map showing up properly...that's a whole different story

Comment by project member Hazem.sa...@gmail.com, Dec 6, 2008

GMaps4JSF works fine with Facelets, and the map is shown up, check this: http://gmaps4jsf.googlecode.com/files/gmaps4jsf1.1.1-facelets.war

Comment by project member Hazem.sa...@gmail.com, Dec 6, 2008

Please if any body finds a specific case or issue, Can s(he) open an issue here: http://code.google.com/p/gmaps4jsf/issues/list

Comment by echoq...@gmail.com, Jan 13, 2009

The google map works fine in my page, but if I add <m:streetViewPanorama /> componment, the map does not work anymore and pops up "Stack overflow" error.

Comment by ibalas...@gmail.com, Jan 24, 2009

Has anybody checked if addresses in native languages are supported? If I put an address string in Russian it gives me "(GClientGeocoder) service not found the address location". I wonder if page encoding might be not correct (utf8 was used).

Comment by ibalas...@gmail.com, Jan 25, 2009

@ibalashov Turned out to be a GET encoding issue. Solved with putting useBodyEncodingForURI="true" into Tomcat's server.xml

Comment by sotco...@gmail.com, Apr 7, 2009

i'm using gmaps4jsf with icefaces. apearantly the initializing js method of the map isn't called when a ajax request is done. this leads to a blank map. any1 got a workaround for that? greetings and thanks

Comment by project member brent.fr...@gmail.com, May 29, 2009

I'm having the same issue with Icefaces...

Comment by project member Hazem.sa...@gmail.com, May 29, 2009

@sot, @ brent:

Did you try the latest snapshot (http://gmaps4jsf.googlecode.com/files/gmaps4jsf-core-1.1.2-SNAPSHOT-28-May-2009.jar)

If you try it and it causes the same bug, I appreciate if you open an issue, and send me a link to your war so I can solve this defect if exists.

Thanks!

Comment by project member brent.fr...@gmail.com, Jun 3, 2009

To get it working with IceFaces?, put this in the constructor of your backing bean:

import com.icesoft.faces.context.effects.JavascriptContext?;

JavascriptContext?.includeLib("http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg", FacesContext?.getCurrentInstance());

Comment by project member brent.fr...@gmail.com, Jun 9, 2009

For IceFaces? partial rendering to work, you must set the renderOnWindowLoad attribute for the Gmaps4JSF:

This flag determines whether to render the map on window load. This flag should be set to false if the map is inside a zone that will be updated by Ajax.
<m:map width="800px" height="600px" autoReshape="true" type="G_HYBRID_MAP" renderOnWindowLoad="false">
Comment by girish.a...@gmail.com, Sep 3, 2009

Hi Hazem We use gmaps4JSF gmaps4jsf-core-1.1.2-SNAPSHOT-20-June-2009.jar Liferay portal server5.2.2 icefaces1.8.0 After using the attribute renderOnWindowLoad="false", we are able to see map in few locations. But it does not work in few places, gives a blank screen. Works fine in IE7 but gives problem in IE8 with VISTA and Firefox3.5 on Windows XP and Vista. If I see view source, i can see the Gmap script there.. but map is not rendered. May be the initialization code is not getting rendered.. blank screen looks bad... Can you please help.

Comment by roger....@notify.co.uk, Sep 29, 2009

Getting the same problem as Girish etc. The m:map doesn't render my map.

I using the GMaps4JSF 1.1.2 jar

If I add the RichFaces? gmap tag;

<rich:gmap/>

Both maps render!

Comment by codeht...@gmail.com, Oct 23, 2009

Using 1.1.2 with ICEfaces, also can't get the map to show up :(

Tried the renderOnWindowsLoad="false", no luck.

Comment by codeht...@gmail.com, Oct 23, 2009

I got it! I added more standard JSF libraries to my project. Hope this helps someone else.

Comment by roger....@notify.co.uk, Nov 4, 2009

I added more standard JSF libraries to my project

Can you expand? Which libraries did you add?

Comment by project member Hazem.sa...@gmail.com, Jan 29, 2010

Guys, Can you please send all of your questions to the project group?

As there is no way to notify me with your comments.

Thanks all!

Comment by juliocgo...@gmail.com, Mar 29, 2010

I need to get lat and lng. How can I do it?

Comment by tuvshin....@gmail.com, Apr 14, 2010

Super cool... wonderful

Comment by saket1...@gmail.com, May 6, 2010

Hi, i am using the key in script and trying to call the <m:map> tag with latLang but map is not rendering. using jsf with richfaces. any suggestion or configuration? thanks

Comment by mirko.ti...@gtempaccount.com, Jun 25, 2010

Hi. I have a quick question. Please consider the following scenario: I'm writing portlets using Liferay and ICEFaces and wanted to use the GMAPS4JSF library for the google map portlet.

I'm doing a search in the backend, so my backing bean has got a List of Objects to show on the map. My requirement is to present the results on the map (done via ui:repeat tag and inside creating markers using m:marker ) and also on a list next to it. Once a user clicks on a marker, then the associated result list item should be highlighted. And vice versa.

Now I thought on using the jsVariable attribute on each marker. Variable name somehow generated based on unique id of the associated result item. In plain javascript somewhere I want to get my hands on the marker objects in order to do something with them, e.g. highlight them by exchanging the icon.

So in my opinion I need access to the marker objects somehow by the generated id (variable name). Are the generated markers somehow get stored in a array, so that I can get my hands on them by the id? Or is it possible to loop over the markers based on the map object itself.

Any ideas how to solve that problem using gmaps4jsf or is that something the library can not provide?

Thanks.

Comment by stealths...@gmail.com, Oct 11, 2010

hi, I just want to ask for this part: <m:map address="#{addressBean.address}">

<m:marker/> <m:htmlInformationWindow htmlText="#{addressBean.address}"/>
</m:map>
If i use the address in m:map, then the address will show up in the map, but if I will to use the address in m:marker, then it will not show up. Is it supposed to be a bug or ?

Right now I am using in this way and the address didn't show up: <m:map >

<m:marker address="#{addressBean.address}"/> <m:htmlInformationWindow htmlText="#{addressBean.address}"/>
</m:map>

but if I am using in this way, the address will be shown in the map: <m:map address="#{addressBean.address}">

<m:marker /> <m:htmlInformationWindow htmlText="#{addressBean.address}"/>
</m:map>

Comment by project member Hazem.sa...@gmail.com, Oct 11, 2010

@stealthshooter: use map autoReshape = true.

Comment by stealths...@gmail.com, Oct 11, 2010

I am looking this weblink http://www.mashups4jsf.com/gmaps4jsf-examples/home.jsf Although it provided some examples on how the gmap4jsf is used (i.e how the coding for the website), but it does not provide the coding for the backing bean. Is there any resource of how the backing bean is coded for the example?

Comment by madmcc...@gmail.com, Feb 23, 2011

Is there a way to change markers color and letter?

Comment by gesc1...@gmail.com, May 11, 2011

does this work with the api that doesnt use api key? the v3 google maps api?

Comment by gesc1...@gmail.com, May 17, 2011

nah, map not showing up on my netbeans web app project with JSF 2.0, firebug shows me this error An attempt was made to use an object that is not, or is no longer, usable" code: "11 and im making everything the same they say here... dont know what to do... damm :S

Comment by frostyni...@gmail.com, Aug 28, 2011

Hi, I found that I need to enclose the <m:map> tag in <h:form> tag for the map to work (which is not mentioned in this particular wiki page). However, <m:streetViewPanorama/> tag does not require a form tag to work.

-- Using gmaps4jsf1.1.4 + JSF

Comment by chahraze...@gmail.com, Sep 1, 2011

hi every one :) i want to ask how to attach an image to a marker !!!!!i want an image that appears in the palce of the marker thks

Comment by AymanElt...@gmail.com, Oct 5, 2011

Great work.

Thank you Mr. Hazem for your great effort

Comment by wini...@gmail.com, Nov 14, 2011

adding several routes? eg from A to B and from B to C

Comment by adam.lic...@gmail.com, Dec 8, 2011

Fantastic framework - great Job! I have one question - why does the autoReshape="true" doesn't work with 1 marker? In my opinion the map should load centering itself on the marker but in my case it always starts in Cairo... I am populating the markers with a dynamic list in Java (retried from a DB). When there are more than 1 markers the map fits nicely to show each. But if in some cases the list would have only 1 location and then I cannot auto-center it on map at startup. Any advice?

Comment by project member Hazem.sa...@gmail.com, Dec 8, 2011

Hi Adam,

Just specify a default address or a default longitude and latitude to override the default value which is "Cairo, Egypt". Map by default is centered with the value specified in the address or longitude and latitude attributes of the map.

Comment by adam.lic...@gmail.com, Dec 12, 2011

Hi Hazem,

Again, great job - the framework is Awesome. The problem is that I populate the map with markers generated dynamically and I use autoReshape="true". But If I define the default address or long/lat the map would ignore the autoReshape option. Some solutions that comes to my head is to define 2 <map> tags on the page and manipulate with 'render' attribute: one for more than 1 marker when I use atoReshape, and the second one for situation when I have a single marker and then define map address on it. This however seems to be a very ugly solution so I haven't checked if it works yet.

Comment by adam.lic...@gmail.com, Dec 12, 2011

Hi Hazem,

When I was googling for a solution, google throw me a link to the source code of the framework. I haven't analyzed it throughly so I am not sure if it is really the case. Take a look at lines 71-81 in gmaps4jsf-map.js file. I guess to solve my problem, there should be a 'if else' option with (this.properties.autoReshape && (this.markers.length == 1)). Maybe you cover that somwhere else but the behaviour I am seeing is different. So again - I don't want to sound like mr. smartypants but just maybe give you a clue what can be the problem.

OH just to be sure - I use 1.1.4 version.

Comment by ggadeka...@gmail.com, Mar 27, 2012

Hi

Plz tell me how to do ajax code on marker

Comment by murarkaa...@gmail.com, Apr 4, 2012

I am trying to use it with JSF 2.0 (JSPs) by including GMaps4JSF1.1.4 jar on my build path. But the page fails to display any maps..It shows a blank space...

The <map:> component is included inside the <h:form>. The taglib is correctly added.The js includes the api key and the jars are added to build path..

Can anyone let me know where am I going wrong..

m:map width="500px" height="300px" latitude="41.033386" longitude="-73.781755" />

Comment by ggadeka...@gmail.com, Apr 23, 2012

Hi

I am trying to show marker cluster using single marker tag with direction how to code it

Thanks Ganesh

Comment by sami.nu...@gmail.com, May 15, 2012

How to change color of m:htmlInformationWindow htmlText? I am using theme where text is white, so information window is always empty or not empty, white font in white backgraound.

Thanks Sami


Sign in to add a comment
Powered by Google Project Hosting