4

I'm building a simple webapp that shows a map from GoogleMaps with multiple markers loaded from my database... but I can't get it to render...

I'm using JSF 2 and gmaps4jsf.

My page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">

[...]
<m:map width="500px" latitude="10.1" longitude="10.1" height="500px" zoom="6" autoReshape="true">
    <ui:repeat var="loc" value="#{locs}">
        <m:marker latitude="#{loc.latitude}" longitude="#{loc.longitude}">
            <m:htmlInformationWindow htmlText="#{loc.latitude}-#{loc.longitude}" />
        </m:marker>
    </ui:repeat>
</m:map>
[...]

I copied the code from an example that is supposed to work... but I can't see the map.

I have gmaps4jsf-core-3.0.0.jar on my classpath, I think I don't have to configure anything else... any ideas?

EDIT: It seems that the tags are not being recognized. When I click on "view source code" in the browser the gmaps tags are not "translated", they are being shown as I wrote them in the xhtml file.

diminuta
  • 1,545
  • 8
  • 32
  • 55

1 Answers1

4

If your tags are not being translated the most probably is that the jar file is in the wrong place. Something is avoiding your webapp to find it. How are you building it?

Place the the latest library jar in your web application WEB-INF/lib folder.

Your m:map has to be inside a h:form tag.

Due to your library version you should include a javascript code:

<script type="text/javascript"
   src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>

Take a look at this simple example for using gmaps4jsf2 library.

Have you got it working with a very basic configuration first? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/template/base-template.xhtml">
    <ui:define name="js">
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?sensor=true">
        </script>
    </ui:define>
    <ui:define name="title">
        This is the new title
    </ui:define>
    <ui:define name="content">
        <h1>Simple Map with a marker and an InfoWindow</h1>

        <h:form id="form">
            <m:map width="500" height="450px" latitude="37.13" longitude="22.43" enableScrollWheelZoom="true">
                <m:marker>
                    <m:htmlInformationWindow htmlText="This is Sparta, Greece"/>
                </m:marker>
            </m:map>
        </h:form>
    </ui:define>
</ui:composition>
</html>

Regards,

Rodmar Conde
  • 956
  • 1
  • 12
  • 24