Maps Getting Started
Using Google Maps in a GWT projectGetting Started
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.Assumptions
- You are already familiar with Google Web Toolkit
- You know how to create a new GWT project.
Downloading the Google Maps Library for GWT
Download latest release from project's download page. Copy downloaded library jar to your projects lib folder(create one if not already present).Creating a new GWT Project
Start by creating a new GWT project named SimpleMaps as described in the Google Plugin for Eclipse user's guide.Since we are working with an additional library, add gwt-maps3.jar to the Java classpath. Then, add the inherits line for com.google.gwt.maps.Maps to your module i.e com.example.google.gwt.mapstutorial.SimpleMaps.gwt.xml in our case.
<inherits name='com.google.gwt.maps.Maps' />
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. <script src="http://maps.google.com/maps/api/js?sensor=false" />
Update the HTML host file
Replace the body of the HTML host file war/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.MapOptions;
import com.google.gwt.maps.client.MapTypeId;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.base.LatLng;
import com.google.gwt.user.client.ui.RootPanel;
public class SimpleMaps implements EntryPoint {
private MapWidget mapWidget;
// GWT module entry point method.
public void onModuleLoad() {
final MapOptions options = new MapOptions();
// Zoom level. Required
options.setZoom(8);
// Open a map centered on Cawker City, KS USA. Required
options.setCenter(new LatLng(39.509, -98.434));
// Map type. Required.
options.setMapTypeId(new MapTypeId().getRoadmap());
// Enable maps drag feature. Disabled by default.
options.setDraggable(true);
// Enable and add default navigation control. Disabled by default.
options.setNavigationControl(true);
// Enable and add map type control. Disabled by default.
options.setMapTypeControl(true);
mapWidget = new MapWidget(options);
mapWidget.setSize("800px", "600px");
// Add the map to the HTML host page
RootPanel.get("mapsTutorial").add(mapWidget);
}
}
