Tutorial: Google Maps with Java, GWT and Eclipse
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.
UPDATE 3 (10/31/09): Please have a look at the maven version of this tutorial.
Preliminaries
Download the required software and sign for a Google Maps API-key.
- 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.
- 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. - Download the Google Web Toolkit
GWT is available at code.google.com. Download and unzip it to whereever you like. - 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).
- 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. - 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.
- 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:
- 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:
- 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:
- 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.
- 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:
- Configure your project for Google Maps
Add <inherits name=”com.google.gwt.maps.GoogleMaps”/> and<script src=”http://maps.google.com/maps?gwt=1&file=api&v=2″ /> to your Module XML-file (e.g.: MyFirstMapsModule.gwt.xml). You can enter your API-Key here (optional for localhost).[/code]
<%%KEEPWHITESPACE%%>
<%%KEEPWHITESPACE%%><%%KEEPWHITESPACE%%>
<%%KEEPWHITESPACE%%>
51 Comments »
RSS feed for comments on this post. TrackBack URL
[...] Tutorial: Google Maps with Java, GWT and Eclipse A step-by-step tutorial showing how to use Cypal Studio and the Google Maps APIs. [...]
This was helpful to me As would any other tutorial of small projects with cypal studios.
Thanks
Very good tutorial !
Thank you!
(A french guy)
Very nice tutorial.
Thank you.
hi, thanks a bunch.
i found it really helpful !
Very good tutorial and well explained.
Thank you for your work.
(A Spanish guy)
Excellent, thanks a bunch.
I struggled a little with “Configure your project for Google Maps” but that’s me being a C++ coder not JEE (culture shock!).
My work is on my employer’s internal server right now but I’ll be putting some work on my own site later.
This was very well written thank you so much. Screen shots were nicely done. Got me started and setup very quickly.
Hi,
I have got sth error:
[ERROR] Unable to load module entry point class com.claudiushauptmann.gwt.maps.samples.client.MyFirstMapsModule (see associated exception for details)
java.lang.RuntimeException: The Maps API has not been loaded.
Is a tag missing from your host HTML or module file? Is the Maps key missing or invalid?
at com.google.gwt.maps.client.Maps.assertLoaded(Maps.java:29)
at com.google.gwt.maps.client.geom.LatLng$.newInstance(Native Method)
at com.claudiushauptmann.gwt.maps.samples.client.MyFirstMapsModule.onModuleLoad(MyFirstMapsModule.java:16)
Could anyone help me ?
Did you add <inherits name=”com.google.gwt.maps.GoogleMaps”/> and <script src=”http://maps.google.com/maps?gwt=1&file=api&v=2″ /> to your Module XML-file (e.g.: MyFirstMapsModule.gwt.xml)?
[...] you are looking for help how to use this library with your own google maps-mashup, my tutorial might be useful. Don’t forget to additionally add both jar-files of GXT and gwt-maps-gxt to [...]
Claudius Hauptmann – I’ve done everything like you wrote ;/ If I don’t using Google Maps API but only GWT everything is OK, code(another) is working, but if i try to plece there some code using GMAPS i have error – for ex:
———Hello.java———
package hellogwt.hello.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.geom.LatLng;
import com.google.gwt.user.client.ui.RootPanel;
public class Hello implements EntryPoint {
public void onModuleLoad() {
MapWidget mapWiget = new MapWidget(LatLng.newInstance(48.136559,11.576318), 5);
mapWiget.setSize(“500px”, “300px”);
RootPanel.get().add(mapWiget);
}
}
——-Hello.gwt.xml——–
Hello.html is stay like that generated by Cypal Module.
Any sugestion ? if no – may be someone who got working examle can send me eclipse project or sth like this
I see xml file code is invisible ;/
The problem is, that eather the Google Maps-API is not referenced or could not be loaded, since the computer is offline for example.
Hi, everytime i tried run it my computer was online.
Now i run everything outside eclipse (by projectCreator etc) and it run with API key only (at localhost). Anyway thanks for help – and good tutorial – it help me very much.
There is an error while compiling ? please help
-style should be followed by one of
OBF, PRETTY, or DETAILED
Google Web Toolkit 1.5.3
GWTShell [-port port-number | "auto"] [-noserver] [-whitelist whitelist-string] [-blacklist blacklist-string] [-logLevel level] [-gen dir] [-out dir] [-style style] [-ea] [url]
where
-port Runs an embedded Tomcat instance on the specified port (defaults to 8888)
-noserver Prevents the embedded Tomcat server from running, even if a port is specified
-whitelist Allows the user to browse URLs that match the specified regexes (comma or space separated)
-blacklist Prevents the user browsing URLs that match the specified regexes (comma or space separated)
-logLevel The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL
-gen The directory into which generated files will be written for review
-out The directory to write output files into (defaults to current)
-style Script output style: OBF[USCATED], PRETTY, or DETAILED (defaults to OBF)
-ea Debugging: causes the compiled output to check assert statements.
and
url Automatically launches the specified URL
i try to edit the xml file adding hte code you proposed ( i also copied and pasted your xml-section with the appropriate modifications) but i get an error from eclipse:
Description Resource Path Location Type
The reference to entity “file” must end with the ‘;’ delimiter.
the referred line
Dimitris – I must add “;” like this:
You need change & to &
I hope it will help you
Thats right. Thank you, Kedzior! My Blog does not display the xml file correctly, please change “&” to “&” in the script tag.
to Kedzior :
I have the same error.I found the reason is the “Hello.html” must hava the tag <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> between tag,then it’s ok.
muy buen tutorial EXCELENTE!!!!!
Yes, it was helpful, thanks!
Very helpful but how can I do if I want to set the map on Paris at the beginning ?
that is a great tutorial and i did like it very much
but i wanted to know how to make that on another server i mean not on localhost
Hi ahmdalitaha,
when you want to deploy your web application that uses gwt-maps to your server, you just have to add an API key to the script tag, that matches your domain name. Google explains this very well on the official Google Maps site.
http://code.google.com/apis/maps/signup.html
Thanks for the tutorial!
Hi!!! How to change the marker color?
I want to thank you for this tutorial, but I have a problem: why did google decided to limit the detail on countries like Romania ? I have to do a project on GPS Traking Device and it seems that google is not helping me as I was expected … ?
[...] tutorial (http://claudiushauptmann.com/tutorial-google-maps-with-java-gwt-and-eclipse.html) recommends using the Cypal plugin: http://www.cypal.in/studio page_revision: 2, last_edited: [...]
The map is not being displayed on the browser running on the local host. it is displaying all other contents except for the map. Pl help us.
Hello Claudius, This tutorial is really good and useful. However i am getting following error in MyFirstMapsModule.java class
: amp cannot be resolve
: Syntax error on token “;”,. expected
Online number 28
I am using exactly the same code as you mentioned above in the tutorial. Please help!!!!
@MG: I think this is a problem of my weblog, which html-encoded the xml code. Please try to download the zipped eclipse workspace und copy the xml code from there. And please write, if it will be working then.
@Romeryto Lira: The marker is a small PNG-image. You cannot change the color, but you can use your own icon with another color. The sample application of the Google Maps wrapper for GWT should have such an example.
@Kushal: Could you please explain the problem a little bit more in detail? Are some other widgets visible? Perhaps the whole GWT code does not work and only the html code out of the host page is visible?
@Florin: Google does not create the map data itselve, but buyes it. When you look at the border between two countries you will see a big difference in detail in most map types.
@Thamak: Why do you want to choose Paris at the beginning? Munich is great! You have to use the “LatLng” of Paris: 51.151786,10.415039
@ahmdalitaha: This is a GWT topic and explained within the documentation of the official GWT site: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=FAQ_PackageAppInWARFile
Simple. Effective. Thanks!
Stay clear of the Cypal 2.0…..
Was gr8.. my first to learn with maps…
[...] som används för att programmera till de flesta kartor som till exepel google maps, med java. Claudius Hauptmann är en annan bra resurs som skrivit ett par artiklar om programmering till google maps. [...]
hallo leute ,
kann mich jemand helfen ? . ich benötige informationen darüber, wie ich mit Java (GWT) im googleMaps API einen Route mit farbige Markierung (keine luft-linie sondern detaliertere Route-Zeichnung) zwischen zwei Latlng (orten) kodieren kann. ???
danke
Great tutorial
It works fine
I spent lot of time to get it run in the default GWT browser but it doesn’t. but when I tried it in FF it works fine
my gwt.xml is as follows
<!– –>
<!– –>
Now I want to pass the parameters manually to the map and load my country as default..
Thanks
(Sri Lankan)
Hi, my weblog has unfortunately cut off the xml content. I never had the Problem that something did not run in the hosted mode browser, but in a web browser. The only idea I ‘ve got is to check, if the hosted mode browser has got enough memory. You could try to add -Xmx and / or -Xms to the launch configuration of the hosted mode browser. Could you please describe the error message, you get?
This was one of the best online tutorials I’ve ever followed. With basically no interpretations or translation I was able to get this application up and running. The detail and accuracy of the steps and screen shots are impeccable. To often I’ve had to work through tutorials that were inaccurate or incomplete. This one stands out as a remarkably good exception to the rule
Hello there Claudius Hauptmann
i need the real road Distance in java for two lat Long points,Right now i am using simple distance formula
–
protected double distance(double pX, double pY) {
double dx=this.x – pX;
double dy=this.y – pY;
double distance=Math.sqrt(dx * dx + dy * dy);
return distance;
}
–
can someone guide me how to obtain this in java
can some one tell me how many times i can ask a query to google to return the distance in one day?
waiting for response
Regards
Sameer
hi
thanx,rally it’s simple and good tutorial
we’r waitin’ 4 ur news
This is very nice tutorial. Thanks!
Hello claudia
i tried the tutorial i got the following errors can you help me.
[ERROR] Line 28: amp cannot be resolved
[ERROR] Line 28: Syntax error on token “;”, delete this token
[ERROR] Unable to find type ‘com.claudiushauptmann.gwt.maps.samples.client.MyFirstMapsModule’
[ERROR] Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly
[ERROR] Failure to load module ‘com.claudiushauptmann.gwt.maps.samples.MyFirstMapsModule’
And i havent done these settings 2. Configure your project for Google Maps
Add and to your Module XML-file (e.g.: MyFirstMapsModule.gwt.xml). You can enter your API-Key here (optional for localhost).
can you tell in which file i shall make these changes
i am using windoms platform
Thanking you
Regards
Sameer
@Claudius
This is warning displayes on console.
WARNING: ‘com.google.gwt.dev.GWTShell’ is deprecated and will be removed in a future release.
Use ‘com.google.gwt.dev.HostedMode’ instead.
(To disable this warning, pass -Dgwt.nowarn.legacy.tools as a JVM arg.)
This tutorial undoubtedly was a great tutorial and I was benefited from here a lot. Please keep sharing good work with everyone. Thanks once again.
very good tutorial und very self-explanatory.
thanks
Das hast weiter geholfen.Danke!
My question is: Under GWT1.7 is NEW/Dynamic Web Application not to be seen. Does this exmaple run in GWT1.7 Web Application, what is to be awared?
Thank’s a lot Claudius.
Your tutorial was helpful for me.
good job.
Hi all,
I was trying out the tutorial. But I get a error while creating module. The message says “Error creating GWT module. See log file for more details”. Now problem is that I cant find the log file and also cant proceed further.
Can anybody help?
Love this post! Thanks for this. I