Recently I took a look at the Google Maps API. Overall the Google Maps API is very well documented and I was pleased to see that they have also done the heavy lifting to integrate Google Maps with the Google Web Toolkit, or GWT. Today I’m going to expand on the sample code they provide and show you how to get everything setup and working – which is sometimes half the battle. We will then simply make the map pan from one location to another and put our markers and info windows in place.
To begin with I’ll assume you do have a GWT 2 compatible JDK installed. Make sure you have the Eclipse 3.5 IDE for Java EE Developers downloaded and installed. Once that is ready install the GWT plugin for Eclipse because it makes GWT development much easier.
The last thing you need is to download the GWT-Maps file which has the jar we need as well as a sample app and the documentation. The most current file at the time of this blog post was: gwt-maps-1.0.4.zip. When you have that downloaded extract it somewhere accessible to you.
Once all of that is installed start Eclipse and create a new project using the little blue Google-like button:
In the next window copy the following:
Once this is done we need to link to the Google Maps jar file. Right-click on the “GWTMaps” folder in the Eclipse Project Explorer and go to “Properties”.
Select the “Java Build Path” and the “Libraries” tab. Then press the “Add External Jars…” button and navigate to the “gwt-maps.jar” file you extracted earlier and select it.
Find the “GWTMaps.gwt.xml” file in your project and add the following lines between the module tags:
<inherits name="com.google.gwt.maps.GoogleMaps" /> <script src="http://maps.google.com/maps?gwt=1&file=api&v=2&sensor=false" />
Edit the “GWTMaps.html” file so that it looks like this:
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GWTMaps.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="gwtmaps/gwtmaps.nocache.js"></script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="mapsTutorial"></div>
</body>
</html>
All I added was the “mapsTutorial” div in case your wondering and deleted some of the auto-generate code.
Now go into the “GWTMaps.java” file and replace all the generated code with this:
package com.mymaps.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.InfoWindow;
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.Timer;
import com.google.gwt.user.client.ui.RootPanel;
public class GWTMaps implements EntryPoint
{
private MapWidget map;
public void onModuleLoad()
{
LatLng somewhereInTexas = LatLng.newInstance(30.000, -97.000);
map = new MapWidget(somewhereInTexas, 2);
map.setSize("500px", "500px");
map.addControl(new LargeMapControl());
final Marker marker = new Marker(somewhereInTexas);
map.addOverlay(marker);
final InfoWindow infoWin = map.getInfoWindow();
infoWin.open(map.getCenter(), new InfoWindowContent("Deep in Texas..."));
Timer t = new Timer()
{
public void run()
{
LatLng newAddress = LatLng.newInstance(18.000, 10.000);
infoWin.close();
marker.setVisible(false);
marker.setLatLng(newAddress);
marker.setVisible(true);
map.getInfoWindow().open(newAddress, new InfoWindowContent("Somewhere in Africa..."));
map.panTo(newAddress);
}
};
t.schedule(6000);
RootPanel.get("mapsTutorial").add(map);
}
}
Run the project and you should see the map with our mark in Texas which after 6 seconds pans over to Africa.
Keep in mind if you write an app using Google Maps you will need to get a Google Maps API key to deploy it outside of your local system.
