Tutorial: Google Maps with Java, GWT and Eclipse

Posted: June 11, 2011 in Java, Mapping

The intention of this tutorial is to show how to use eclipse to develop a rich internet application with GWT that contains a Google Maps-map. The focus is less on the API provided by the Google Maps-wrapper for GWT, but how to use eclipse as a comfortable IDE. Google itself provides a very comprehensive example (source code) that demonstrates the possibilities of the wrapper.

UPDATE (01/07/09): Since there is some discussion about how to put this tutorial into action, I decided to provide a zip file containing the finished eclipse workspace of this tutorial: tutorialgwtmaps. Don’t forget to update the build path and the GWT home folder!

UPDATE 2 (01/14/09): Code Formatted.

Preliminaries
Download the required software and sign for a Google Maps API-key.

  1. Download and install the Java SE Development Kit
    You need the JDK to run Eclipse, the GWT Hosted Mode-Browser and the GWT-Compiler. On MacOS the JDK is installed by default, for other operating systems you can download the JDK from Sun.
  2. Download and unzip the Eclipse IDE for Java EE Developers
    Download Eclipse for EE Developers. You can unzip Eclipse to whereever you like, for example into the folder applications or programs.
  3. Download the Google Web Toolkit
    GWT is available at code.google.com. Download and unzip it to whereever you like.
  4. Download und install Cypal Studio for GWT
    Cypal Studio is a Eclipse plugin that integrates GWT into Eclipse the build process and the launch process. Unzip the plugin jars into <Eclipse home>/dropins/Cypal/plugins. You have to manually create the Cypal and plugins directories (installation manual).
  5. Download and unzip the Google Maps-library for GWT
    The Google Maps-library for GWT wrappes the javascript necessary to run Google Maps on your website. Download and unzip the library to whereever you like.
  6. Sign up for a Google Maps Api-Key
    This step is optional for development on your local computer (localhost). You can sign up for a key here.

Setup the eclipse workspace
Configure the eclipse workspace and project. This section contains only the configuration of eclipse, no source code that you would check in for example into svn.

  1. Eclipse Workspace
    Open Eclipse and choose a directory as workspace (project configuration and source code will/can be stored here).

    When Eclipse has started, you will see the welcome screen:

    Close the Welcome screen with the arrow on the right side and the workspace is displayed:
  2. Configuration of Cypal Studio
    Open the Preferences Dialog (Eclipse/Preferences on MacOS or Window/Preferences) and select Cypal Studio on the left side. Then Enter the folder where the Google Web Tookit is located and click OK:
  3. Create the GWT-Project
    Select File/New/Dynamic Web Project. Enter MyFirst Google Maps Application as project name and select Cypal Studio for GWT as configuration, then click Next.

    You can leave the default values on the next page and click Finish.

    You will see a new project on the left side in the project explorer:
  4. Add the Google Maps-library to the Java Build Path
    Rightclick your new project and select Properties in the popup menu, then select Java Build Path on the left side and Libraries on the top. Click Add External JARs… and add the file gwt-maps.jar located in the Google Maps for GWT-library.

Your first Google Maps-application
This section handles the source code and configuration files. It adjusts the GWT-template to create a Google Maps-map.

  1. Create a GWT Module
    Select File/New/Other…, then Cypal Studio/GWT Module and click Next:

    Enter a package (e.g.: com.claudiushauptmann.gwt.maps.samples) and a name for the module (e.g.: MyFirstMapsModule) and click Finish.

    Your workspace will look like this with 3 new files. A Java class with the module, a wrapper-html-file and a xml-file that defines the GWT-Module:
  2. Configure your project for Google Maps
    Add <inherits name=”com.google.gwt.maps.GoogleMaps”/> and<script src=”http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2″ /> to your Module XML-file (e.g.: MyFirstMapsModule.gwt.xml). You can enter your API-Key here (optional for localhost).

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    &lt;module&gt;
        &lt;!-- Inherit the core Web Toolkit stuff.                  --&gt;
        &lt;inherits name='com.google.gwt.user.User'/&gt;
        &lt;inherits name=&quot;com.google.gwt.maps.GoogleMaps&quot;/&gt;
        &lt;!-- Specify the app entry point class.                   --&gt;
        &lt;entry-point class='com.claudiushauptmann.gwt.maps.samples.client.MyFirstMapsModule'/&gt;
        &lt;inherits name=&quot;com.google.gwt.user.theme.standard.Standard&quot;/&gt;
        &lt;!-- &lt;inherits name=&quot;com.google.gwt.user.theme.chrome.Chrome&quot;/&gt; --&gt;
        &lt;!-- &lt;inherits name=&quot;com.google.gwt.user.theme.dark.Dark&quot;/&gt; --&gt;
    &lt;/module&gt;
  3. Add some code that inserts a MapWidget into the web page:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    package com.claudiushauptmann.gwt.maps.samples.client;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.maps.client.MapWidget;
    import com.google.gwt.maps.client.control.MapTypeControl;
    import com.google.gwt.maps.client.control.SmallMapControl;
    import com.google.gwt.maps.client.event.MapClickHandler;
    import com.google.gwt.maps.client.geom.LatLng;
    import com.google.gwt.maps.client.overlay.Marker;
    import com.google.gwt.maps.client.overlay.Overlay;
    import com.google.gwt.user.client.ui.RootPanel;
    public class MyFirstMapsModule implements EntryPoint {
        public void onModuleLoad() {
            MapWidget mapWiget = new MapWidget(LatLng.newInstance(48.136559, 11.576318), 13);
            mapWiget.setSize(&quot;500px&quot;, &quot;300px&quot;);
            mapWiget.addControl(new SmallMapControl());
            mapWiget.addControl(new MapTypeControl());
            mapWiget.addMapClickHandler(new MapClickHandler() {
              public void onClick(MapClickEvent e) {
                MapWidget sender = e.getSender();
                Overlay overlay = e.getOverlay();
                LatLng point = e.getLatLng();
                if (overlay != null &amp;amp;&amp;amp; overlay instanceof Marker) {
                  sender.removeOverlay(overlay);
                } else {
                  sender.addOverlay(new Marker(point));
                }
              }
            });
            RootPanel.get().add(mapWiget);
        }
    }

The launch configuration
Now we want to run and debug our application. First we debug it in the Hosted Mode-Browser, the we compile it to javascript and open it with a standard internet browser.

  1. Create a launch configuration and start debugging
    Select Run/Debug Configurations… and create a new launch configuration with the button on the top left. Enter a name for the launch configuration and selct your project and your module, then click Apply.
  2. Debugging
    Click Debug and the Hosted Mode-browser starts:
  3. Compile and run in your Browser
    Click Compile/Browse, wait some seconds and your standard browser will open and show your application:

It would give me a great pleasure, if you wrote a short comment, whether this tutorial was helpful!

Reference

http://claudiushauptmann.com/tutorial-google-maps-with-java-gwt-and-eclipse.html

 

Advertisements
Comments
  1. i can’t see the images

  2. adriana says:

    Hi, I’m interested in this tutorial, however the images aren’t working quite right, I can’t see them.

    Is there any way I could get them? I’m developing a similar project.

    Thanks. Adriana.

  3. fypandroid says:

    I have provided the link to original tutorial but it seems like the link is no longer valid. Sorry can’t help you in that case.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s