Google maps using GWT – getting directions
Monday, October 25th, 2010
Getting directions, calculating and displaying the route between start point and destination can be easily done using com.google.gwt.maps.client.geocode
All we need is a map object ,a directions pannel then the direction query options
DirectionQueryOptions opts = new DirectionQueryOptions(map,directionsPanel);
The query for direction is a string which looks like “from: departure address to: destination address”.This query will be loaded by the Directions object.
Here’s a simple example (two separate text boxes for entering the from and to addresses ,the root panel contains a grid which includes the map having the route marked and the direction panel) :
package com.gwtmaps.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.control.LargeMapControl;
import com.google.gwt.maps.client.geocode.DirectionQueryOptions;
import com.google.gwt.maps.client.geocode.DirectionResults;
import com.google.gwt.maps.client.geocode.Directions;
import com.google.gwt.maps.client.geocode.DirectionsCallback;
import com.google.gwt.maps.client.geocode.DirectionsPanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
/**
* Entry point classes define onModuleLoad().
*/
public class GWTDirections implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = “An error occurred while ”
+ “attempting to contact the server. Please check your network ”
+ “connection and try again.”;
/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Grid grid = new Grid(1, 2);
grid.setWidth(“100%”);
grid.getCellFormatter().setWidth(0, 0, “74%”);
grid.getCellFormatter().setVerticalAlignment(0,0, HasVerticalAlignment.ALIGN_TOP);
grid.getCellFormatter().setWidth(0, 1, “24%”);
grid.getCellFormatter().setVerticalAlignment(0,1, HasVerticalAlignment.ALIGN_TOP);
final Button sendButton = new Button(“Send”);
final TextBox fromField = new TextBox();
fromField.setText(“Enter Departure”);
fromField.setTitle(“From:”);
final TextBox toField = new TextBox();
toField.setText(“Enter Destination”);
toField.setTitle(“To:”);
// We can add style names to widgets
sendButton.addStyleName(“getMap”);
// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get().add(fromField);
RootPanel.get().add(toField);
RootPanel.get().add(sendButton);
// Focus the cursor on the name field when the app loads
fromField.setFocus(true);
fromField.selectAll();
// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {
/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
//remove preexisting maps
removeExistingMaps();
MapWidget map = new MapWidget();
map.setSize(“500px”, “500px”);
// Add some controls for the zoom level
map.addControl(new LargeMapControl());
//calculate direction
grid.setWidget(0, 0, map);
DirectionsPanel directionsPanel = new DirectionsPanel();
grid.setWidget(0, 1, directionsPanel);
directionsPanel.setSize(“100%”, “100%”);
// Add the map to the HTML host page
RootPanel.get().add(grid);
DirectionQueryOptions opts = new DirectionQueryOptions(map,directionsPanel);
String query = “from: ” +fromField.getText() + ” to: ” + toField.getText();
Directions.load(query , opts, new DirectionsCallback() {
public void onFailure(int statusCode) {
GWT.log(“Failed to load directions: Status ” + statusCode, null);
}
public void onSuccess(DirectionResults result) {
GWT.log(“Succesfully load directions “, null);
}
});
}
private void removeExistingMaps() {
for( int i=1;i
if(RootPanel.get().getWidget(i).getClass().equals(MapWidget.class))
{
MapWidget mapWidget = (MapWidget) RootPanel.get().getWidget(i);
RootPanel.get().remove(mapWidget);
}
}
}
public void onKeyUp(KeyUpEvent event) {
}
}
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
}
}
