My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
MapsGettingStarted  
Using Google Maps in a GWT project
Updated May 27, 2010 by piotr.sw...@gmail.com

Getting Started with Google Maps

The Google Maps API provides a convenient JavaScript API which allows you to add mapping functionality to your application. The Google Maps library for GWT allows you to access this JavaScript API from Java code compiled with the GWT compiler. At the present time, the gwt-maps API only supports Google Maps API version 2.

This guide describes the basics of getting the Google Maps Library working in a GWT project. For more information on the functionality provided by the API itself, see the Google Maps API developer's guide.

Assumptions

Downloading the Google Maps Library for GWT

You can download the latest release of the library from the project download page. After you download the distribution, uncompress it. Inside the folder you will find a .jar file named gwt-maps.jar.

You can either reference the .jar file from the folder that you uncompressed the project in, or copy it to another location, such as the location of your GWT distribution (containing gwt-dev.jar and gwt-user.jar files). In this example, we've chosen to copy the file to the path /usr/local/gwt-maps. If you are using Windows, you might choose to copy these files to a path like C:\gwt\gwt-maps

Creating a new GWT Project

Start by creating a new GWT project called SimpleMaps as described in the Google Plugin for Eclipse user's guide.

Since we are working with an additional library, add gwt-maps.jar to the Java classpath. Then, add the inherits line for com.google.gwt.maps.GoogleMaps to your module.

$PP_OFF
    <inherits name='com.google.gwt.maps.GoogleMaps' />

Note that in order to use the Maps API, you need to apply for a Google Maps API key. Running with no key specified will work with localhost for development purposes, but you will need to apply for your own key to deploy to a website.

Update the HTML host file

Remove all contents from the body of the HTML host file src/com/example/google/gwt/mapstutorial/public/SimpleMaps.html. This demo will use the RootLayoutPanel to create a dynamic application.

<body>
</body>

Make sure the HTML DOCTYPE declaration is set at the top of the file to <!doctype html> to put the browser rendering engine in standards mode. This is required for the GWT LayoutPanel to work correctly on all browsers.

Maps API key

Note that in order to use the Maps API version 2, you need to apply for a Google Maps API key. Running with no key specified will work with localhost for development purposes, but you will need to apply for your own key to deploy to a website. The key can be specified either as a script tag query string, or as a parameter to the Maps.loadMapsApi() method as shown below.

Add a map object to .java source

To complete the src/com/example/google/gwt/mapstutorial/client/SimpleMaps.java file, remove the contents of the SimpleMaps class, add some imports, and replace the body of the class as follows:

package com.example.google.gwt.mapstutorial.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.maps.client.InfoWindowContent;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.Maps;
import com.google.gwt.maps.client.control.LargeMapControl;
import com.google.gwt.maps.client.geom.LatLng;
import com.google.gwt.maps.client.overlay.Marker;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;

/*
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class SimpleMaps implements EntryPoint {

  // GWT module entry point method.
  public void onModuleLoad() {
   /*
    * Asynchronously loads the Maps API.
    *
    * The first parameter should be a valid Maps API Key to deploy this
    * application on a public server, but a blank key will work for an
    * application served from localhost.
   */
   Maps.loadMapsApi("", "2", false, new Runnable() {
      public void run() {
        buildUi();
      }
    });
  }

  private void buildUi() {
    // Open a map centered on Cawker City, KS USA
    LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);

    final MapWidget map = new MapWidget(cawkerCity, 2);
    map.setSize("100%", "100%");
    // Add some controls for the zoom level
    map.addControl(new LargeMapControl());

    // Add a marker
    map.addOverlay(new Marker(cawkerCity));

    // Add an info window to highlight a point of interest
    map.getInfoWindow().open(map.getCenter(),
        new InfoWindowContent("World's Largest Ball of Sisal Twine"));

    final DockLayoutPanel dock = new DockLayoutPanel(Unit.PX);
    dock.addNorth(map, 500);

    // Add the map to the HTML host page
    RootLayoutPanel.get().add(dock);
  }
}

Run the SimpleMaps sample project

Now save your project and run it in development mode.

Congratulations! You should now have Google Maps API working within a GWT application.

Comment by ajinkyat...@gmail.com, Mar 31, 2009

We are just getting a Simple Map text as heading tag in the browser and the map is not being displayed as you have shown in your sample output. Please help me understand where i am going wrong.

Comment by galgwt.reviews@gmail.com, Mar 31, 2009

Please post to the gwt-google-apis or google-web-toolkit Google Group with any exceptions you might be getting in the hosted mode browser window.

Comment by f.bauchi...@gmail.com, May 20, 2009

Works greate. Is there any way to get the longitude / latitude for a city name? Creating the points with the coordinates is quite inconvenient..

Comment by dmcma...@gmail.com, Jul 13, 2009

Maps key problems can only be debugged in deployed mode, that is a cool feature!

Comment by mattas...@gmail.com, Dec 14, 2009

I cannot get this to work in hosted mode. I keep getting the error com.google.appengine.tools.development.LocalResourceFileServlet? doGet No file found for /maps

It seems to keep looking locally instead of going to the url specified in the script tag. Any ideas would be welcome. I have been searching high and low.

Comment by stanis...@gmail.com, Dec 26, 2009

Using "Add External Jar" is a just partial solution that only works for the devmode. The server deployment mode still won't work, since the generated war file won't contain gwt-maps.jar. The complete solution would be to set up Eclipse to automatically copy gwt-maps.jar to war/WEB-INF/lib as part of the build process. This is the way it already works for App Engine and GWT jars, and the Maps library should just do the same. Since I'm not an Eclipse expert, I can't provide a specific way to implement this proposal, so any ideas are welcome.

Comment by stanis...@gmail.com, Dec 26, 2009

Here's one way to do this. Add the following to your build.xml:

  <target name="libs.maps" description="Copy gwt-maps.jar to WEB-INF/lib">
    <mkdir dir="war/WEB-INF/lib" />
    <copy todir="war/WEB-INF/lib" file="${maps.sdk}/gwt-maps.jar" />
  </target>

Add "depends" attribute to the existing "libs" target (this fixes your regular "ant build"):

  <target name="libs" depends="libs.maps" description="Copy libs to WEB-INF/lib">

Create Eclipse launcher file .externalToolBuilders/GWTMapsCopier.launch (replacing YOUR_PROJECT and YOUR_ANT_BINARY):

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <launchConfiguration type="org.eclipse.ui.externaltools.ProgramBuilderLaunchConfigurationType">
  <stringAttribute key="org.eclipse.debug.core.ATTR_REFRESH_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#13;&#10;&lt;launchConfigurationWorkingSet editPageId=&quot;org.eclipse.ui.resourceWorkingSetPage&quot; factoryID=&quot;org.eclipse.ui.internal.WorkingSetFactory&quot; id=&quot;1261881594950_1&quot; label=&quot;working set&quot; name=&quot;working set&quot;&gt;&#13;&#10;&lt;item factoryID=&quot;org.eclipse.ui.internal.model.ResourceFactory&quot; path=&quot;/YOUR_PROJECT/war/WEB-INF/lib&quot; type=&quot;2&quot;/&gt;&#13;&#10;&lt;/launchConfigurationWorkingSet&gt;}"/>
  <booleanAttribute key="org.eclipse.debug.ui.ATTR_LAUNCH_IN_BACKGROUND" value="false"/>
  <stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#13;&#10;&lt;launchConfigurationWorkingSet editPageId=&quot;org.eclipse.ui.resourceWorkingSetPage&quot; factoryID=&quot;org.eclipse.ui.internal.WorkingSetFactory&quot; id=&quot;1261899307279_221&quot; label=&quot;workingSet&quot; name=&quot;workingSet&quot;&gt;&#13;&#10;&lt;item factoryID=&quot;org.eclipse.ui.internal.model.ResourceFactory&quot; path=&quot;/YOUR_PROJECT/gwt-maps/gwt-maps.jar&quot; type=&quot;1&quot;/&gt;&#13;&#10;&lt;item factoryID=&quot;org.eclipse.ui.internal.model.ResourceFactory&quot; path=&quot;/YOUR_PROJECT/war/WEB-INF/lib/gwt-maps.jar&quot; type=&quot;1&quot;/&gt;&#13;&#10;&lt;/launchConfigurationWorkingSet&gt;}"/>
  <stringAttribute key="org.eclipse.ui.externaltools.ATTR_LOCATION" value="YOUR_ANT_BINARY"/>
  <stringAttribute key="org.eclipse.ui.externaltools.ATTR_RUN_BUILD_KINDS" value="full,incremental,auto,"/>
  <stringAttribute key="org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS" value="libs.maps"/>
  <booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
  <stringAttribute key="org.eclipse.ui.externaltools.ATTR_WORKING_DIRECTORY" value="${workspace_loc:/YOUR_PROJECT}"/>
  </launchConfiguration>

Add custom Eclipse build step in your .project file:

  <buildCommand>
    <name>org.eclipse.ui.externaltools.ExternalToolBuilder</name>
    <triggers>auto,full,incremental,</triggers>
    <arguments>
      <dictionary>
        <key>LaunchConfigHandle</key>
          <value>&lt;project&gt;/.externalToolBuilders/GWTMapsCopier.launch</value>
      </dictionary>
    </arguments>
  </buildCommand>

This adds a custom "Program" builder to the Eclipse build sequence, which will copy gwt-maps.jar whenever it's missing or otherwise modified. There should be an easier way to do the same using another type of custom builder, called "Ant Builder", but I couldn't get it work just yet.

Powered by Google Project Hosting