My favorites | Sign in
Google
Project Home
  
Downloads
  
Wiki
  
Issues
  
Source
    
Search
for
Updated Jun 02, 2009 by galgwt.reviews
MapsGettingStarted  
Using Google Maps in a GWT project

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.

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-<machine>.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 GWT Getting Started Guide.

Since we are working with an additional library, we use the command line argument -addToClassPath which adds the library /usr/local/gwt-maps/gwt-maps.jar to the Java classpath for the launch, compile and and eclipse definitions. For the purposes of this example we assume gwt-maps.jar has been unpacked in /usr/local/gwt-maps and that you are using the Eclipse IDE.

We also need to tell the GWT compiler that we are using the Maps module. To do this, we use the command line argument -addToModule and specify com.google.gwt.maps.GoogleMaps as the module to be inherited. This will place the inheritance entry Maps.gwt.xml into the generated project file SimpleMaps.gwt.xml. 

$PP_OFF
$ projectCreator -eclipse SimpleMaps -out SimpleMaps \
     -addToClassPath /usr/local/gwt-maps/gwt-maps.jar

$ applicationCreator -eclipse SimpleMaps -out SimpleMaps \
		     -addToClassPath /usr/local/gwt-maps/gwt-maps.jar \
		     -addModule com.google.gwt.maps.GoogleMaps \
		     com.example.google.gwt.mapstutorial.client.SimpleMaps

Now you should now have a standard project set up. Before continuing, make sure you can launch the skeleton project in hosted mode by running SimpleMaps-shell from the command line.

Also test out compilation with the SimpleMaps-compile script or the Compile/Browse button in hosted mode. 

$PP_OFF
$ ./SimpleMaps-compile
Compiling into ./www/com.example.google.gwt.mapstutorial.SimpleMaps
Copying all files found on public path
Compilation succeeded

If you are using the Eclipse IDE, now would be a good time to import your new project into Eclipse using the File --> Import... command.

Adding the Maps script tag to your module XML file

Your GWT application will need access to the Maps API, as well as the API key. In order to do this, you must include a <script> tag in your module's SimpleMaps.gwt.xml file. Include the script tag shown in your module.xml file above the automatically generated stylesheet reference. 

 <!-- Load the Google Maps GWT bindings from the gwt-google-apis project -->
 <!-- Added by projectCreator if you use the -addModule argument -->
 <inherits name="com.google.gwt.maps.GoogleMaps" />

 <!--
    If you want to deploy this application outside of localhost,
    you must obtain a Google Maps API key at:
    http://www.google.com/apis/maps/signup.html
    Replace the src attribute below with a URL that contains your key.
  -->
 <!-- script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;key=???" /-->

 <!-- You can usually run under localhost without a key                           -->
 <!-- Set the 'sensor' parameter to true if your app makes use of an onboard
      positioning sensor, such as a GPS reciever.
   -->
 <script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />

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

Replace the body of the HTML host file src/com/example/google/gwt/mapstutorial/public/SimpleMaps.html with a <div> tag that we can use for the GWT application. 

<body>

    <h1>SimpleMaps</h1>

    <div id="mapsTutorial"></div>

</body>

Add a map object to .java source

To complete the src/com/example/google/gwt/mapstutorial/client/SimpleMaps.java file, add some imports, a member to store a MapWidget instance, and replace the body of the onModuleLoad() method. 

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

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.InfoWindowContent;
import com.google.gwt.maps.client.MapWidget;
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.RootPanel;

public class SimpleMaps implements EntryPoint {
  private MapWidget map;

  // GWT module entry point method.
  public void onModuleLoad() {
    LatLng cawkerCity = LatLng.newInstance(39.509,-98.434);
    // Open a map centered on Cawker City, KS USA

    map = new MapWidget(cawkerCity, 2);
    map.setSize("500px", "300px");
    
    // 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"));
    
    // Add the map to the HTML host page
    RootPanel.get("mapsTutorial").add(map);
  }
}

Run the SimpleMaps sample project

Now you should be able to execute your sample project in hosted mode by either running SimpleMaps-shell from the command line or using the Run configuration from Eclipse.

If you would like to see your project in your host's web browser (web mode), press the Compile/Browse button in hosted mode.


Comment by cbsuthar, Mar 09, 2009

I am confusing for where can I create this directory in project /usr/local/gwt-maps/gwt-maps.jar for the .jar file

Comment by ajinkyaterkar99, 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, 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.bauchinger, 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 dmcmanam, Jul 13, 2009

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

Comment by chewychompy, Oct 18, 2009

they make this seem harder than it is.

In Eclipse Ganymede:

Take a GWT project, right click on the project root and click properties.

Go to the "Java Build Path" node, click "Add External JARs" and ad your gwt-maps jar.

add this to the xml file <inherits name="com.google.gwt.maps.GoogleMaps" /> <script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />

add this to a html file associated with the entrypoint you're going to use this on. <div id="mapsTutorial"></div>

add the java code above where it says "Add a map object to .java source".

If you want the LAT/LNG of a place you will need to look up Geocoding. There are a ton of tutorials, documents and the GWT-Maps zip file you downloaded to get the Jar file has 3 examples for geocoding.

Google API People, it would be appreciated if you would re-create this example as an eclipse project and host it at the bottom of this document.

Comment by mattashaw, 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 shantanu.karve, Dec 15, 2009

Yup, that comment by chewycompy was timely - I really had no problem doing things his/her way in Eclipse insted of the command line level stuff followed by an import.

Comment by stanislav, 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 stanislav, 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.


Sign in to add a comment