Example “Google Maps API v3 for GWT” Project for Eclipse

Question

Google released official maps v3 API for GWT here https://groups.google.com/forum/#!topic/gwt-google-apis/6SO5kCDqb-k (Note that http://code.google.com/p/gwt-google-maps-v3/

Answer 1

Above example is really helpfull. I am sending my own piece of code so that it can also help others to develop Google Map V3 with GWT 2.4

Jars Require for Google Map V3 is gwt-maps.jar (Version 3.8.0). For Maven build below is the dependency:

<dependency>
  <groupId>com.google.gwt.google-apis</groupId>
  <artifactId>gwt-maps</artifactId>
  <version>3.8.0</version>
</dependency>

In your entryPoint.gwt.xml write down the below:

<inherits name="com.google.maps.gwt.GoogleMaps" />
<script src="http://maps.google.com/maps/api/js?sensor=false" />

Import statements are:

import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.GoogleMap;

In GWT code take a button and write down the map loading code in to buttons onClick Event.

// This is the layout which will hold the button
final HLayout actionbuttonsLayout = new HLayout(10);
final IButton showMap = new IButton("Locate your Store");
actionbuttonsLayout.addMember(showMap);

//--- This is the layout which will hold the Map 
final HLayout mapLayout = new HLayout(50);  
final SimplePanel widg = new SimplePanel() ;
widg.setSize("700px", "200px");     
layout.addMember(mapLayout);
mapLayout.setVisible(false);

// This is the Click Handler where the map rendering process has been written
showMap.addClickHandler(new ClickHandler() {  

    public void onClick(ClickEvent event) {

        MapOptions options  = MapOptions.create();

        options.setCenter(LatLng.create(39.509, -98.434)); 
        options.setZoom(6);
        options.setMapTypeId(MapTypeId.ROADMAP);
        options.setDraggable(true);
        options.setMapTypeControl(true);
        options.setScaleControl(true);
        options.setScrollwheel(true);

        GoogleMap theMap = GoogleMap.create(widg.getElement(), options) ;
        mapLayout.addMember(widg);
        mapLayout.setVisible(true);
    }  
});

Answer 2

Here are a few tips to help you get starting:

gwt-maps.jar should be placed in WEB-INF/lib

in your prject.gwt.xml you might add in your <module> section:

<inherits name="com.google.maps.gwt.GoogleMaps" />
<script src="http://maps.google.com/maps/api/js?sensor=false" />

this will make loading maps api when loading page.

Followings are copy/paste lines from my app, arrange them to match your needs:

        MapOptions options  = MapOptions.create() ;

    options.setCenter(LatLng.create( latCenter, lngCenter ));   
    options.setZoom( 6 ) ;
    options.setMapTypeId( MapTypeId.ROADMAP );
    options.setDraggable(true);
    options.setMapTypeControl(true);
    options.setScaleControl(true) ;
    options.setScrollwheel(true) ;

    SimplePanel widg = new SimplePanel() ;

    widg.setSize("100%","100%");

    GoogleMap theMap = GoogleMap.create( widg.getElement(), options ) ;

    RootLayoutPanel.get().add( widg ) ;

This will build a widget with a map inside.