Google maps in Liferay Vaadin Portlet

I had a bit of difficulty getting this working... but as with most things.. once you know how, it is pretty easy...


I am creating a portlet using the OpenLayers Addon for vaadin.

To be able to display a google map, you need to create a custom widgetset...
create a new package to hold the widgetset in your project, say at org.yourco.yourproj.widgetset
create a new file: yourprojwidgetset.gwt.xml  add the following code:

 <?xml version="1.0" encoding="UTF-8"?> 

 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd"> 

 <module> 

      <!-- WS Compiler: manually edited --> 

      <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" /> 

   <!-- 

    Uncomment the following to compile the widgetset for one browser only. 

    This can reduce the GWT compilation time significantly when debugging. 

    The line should be commented out before deployment to production 

    environments. 

    Multiple browsers can be specified for GWT 1.7 as a comma separated 

    list. The supported user agents at the moment of writing were: 

    ie6,ie8,gecko,gecko1_8,safari,opera 

    The value gecko1_8 is used for Firefox 3 and later and safari is used for 

    webkit based browsers including Google Chrome. 

   --> 

   <!-- <set-property name="user.agent" value="gecko1_8"/> --> 

            <script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script> 

   <inherits name="org.vaadin.vol.VolWidgetsetWithHostedScript" /> 

 </module> 

Compile the widgetset... I have the liferay ide and vaadin plugins for eclipse, there is a built in toolbar command to do this.  You can also do this via maven or ant... see the Book of Vaadin for more details...

Once compiled this will create a folder under your source folder:

Yourportlet/VAADIN/widgetsets/org.yourco.yourproj.widgetset

copy this folder to wherever you have your liferay installed into the common VAADIN widgetset folder.  To avoid difficulties, liferay only allows portlets to use a shared widgetset folder, not custom ones per portlet... you can override this behaviour if you want... but I am not explaining that here... it is not that difficult to do though... here is how to do it if interested.

The liferay folder to copy to is: liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\ROOT\html\VAADIN\widgetsets

Update your portlet.xml to add an init-param section under the portlet section:

      <init-param> 

                <name>widgetset</name> 

                <value>org.yourco.yourproj.widgetset</value> 

           </init-param> 

Now just create a new openmaplayer googlemap according to the documentation and you should now see it fine.