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/ is deprecated and is not official.)

I have downloaded the zip file and there are samples in it but they are all java. I can not figure out how to inherit it in my project.gwt.xml or what to write into my main html or where to put the gwt-maps.jar file.

Is there any complete Eclipse GWT project "for the OFFICIAL API" to start with? Or any guidance link which explains how to start from zero to my first class which has the OnModuleLoad()?

Thanks

Answer 1

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.

Answer 2

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);
    }  
});