How to add Google map for GWT into FormPanel

StackOverflow https://stackoverflow.com/questions/23543415

Question

I am new to GWT and face some problem here. I need to show up Google map on a form in my GWT web.

First, there has a windowForm.class which extends FormPanel and I have wrote a mapWindowForm.class which extends this windowForm.class as below. http://paste.ideaslabs.com/show/Q0ThysUrSF And the problem is how shall I add this map "final MapWidget map = new MapWidget(Location, 2);" which is a MapWidget into this FormPanel: "mapWindowForm.class"

This system was developed by GWT-2.5.0. The library I have imported is gwt-maps-1.1.1.jar(Maps v2 API 1.1.1), so I give "2" as the second parameter in Maps.loadMapsApi(). Unfortunately, the first time to call mapWindowForm.class, the window.alert showed up, indicated that the Map.loadMapsApi() has not successed. But the second time to call this class, the window.alert didn't show up until I have refresh the web page. When I tried to give "3", it shows the sensor shall be given as true of false. When I tried to use gwt-maps-3.8.1(Maps v3 API), the import were not work.

I have tried some way to add this Map into frompanel as below

  1. add(map);

  2. LayoutContainer lc= new Layoutcontainer(); lc.add(map); add(lc);

But both doesn't work, it just show a FormPanel with nothing on it.

I am not sure that is the MapWidget doesn't create or the MapWidget doesn't add into the FormPanel succeed

Thanks.

Hi Braj,

Thank you very much for your reply.

I have tried your suggestion in my code, but still face some problem.

mapWindowForm form = new mapWindowForm();

GoogleMap gmap = googleMap.create(form.getElement(), options);

But, I still don't how to add the gMap into my mapWindowForm.

Others form in this project would be code as below:(BaseWindow.java extends Window)

BaseWindow window = new BaseWindow(new mapWindowForm());

window.show();

And I have found this issue Example "Google Maps API v3 for GWT" Project for Eclipse.

As this issue claimed, I need to add <inherits name="com.google.maps.gwt.GoogleMaps" /> in my project.gwt.xml and a script to load map api. But some one also said cannot add script in gwt.xml.

So, I add inherits into gwt.xml and script into my project.html. But I am bit of confuse, according to https://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted , it was import com.google.gwt.maps, but in this issue, it import com.google.maps.gwt, what's the different between them?

Thanks again.

I have tried below code(BaseWindow.java extends Window, windowForm.java extends FormPanel)

onClick(){

//    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) ;
      windowForm panel = new mapWindowForm();

//    GoogleMap gMap = GoogleMap.create( panel.getElement(), options ) ;

      //BaseWindow(FormPanel formpanel, String ID, String title, int Height, int Weight)
      BaseWindow window = new BaseWindow(panel,"Maps","This is Maps", 500, 650);
      window.show();
}

This will show a form with title "This is Maps" and nothing in it. But, when I unmark the toggle, the form will not be showed. Click the button will nothing happen. I am wonder is MapOptions doesn't work(API not load?) correct or some error because GWT container?

After created a new Google web application project and tried as below code:

public class Map implements EntryPoint {

    public void onModuleLoad() {
        FormPanel panel = new FormPanel();
        panel.setWidth("100%");
        panel.setHeight("100%");
        MapOptions options = MapOptions.create();
        options.setCenter(LatLng.create(23,-151));
        options.setZoom(2);
        options.setMapTypeId(MapTypeId.ROADMAP);
        options.setDraggable(true);
        options.setMapTypeControl(true);
        options.setScaleControl(true);
        options.setScrollwheel(true);
        Button btn = new Button();
        GoogleMap gMap = GoogleMap.create(panel.getElement(), options);
        RootPanel.get().add(panel);
        RootPanel.get().add(btn);

        gMap.addIdleListener(new GoogleMap.IdleHandler() {

            public void handle() {
                Window.alert("Idle");

            }
        });
    }
}

Also add gwt-map.3.8.1.jar into project and add configuration as below into Map.gwt.xml

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

Compile success while with network connection. But when run as web application, the url http://127.0.0.1:8888/Map.html?gwt.codesvr=127.0.0.1:9997 doesn't show up Google Map. So, I have added a button, it has been showed. And add a idleListener, the Window.alert showed up, indicated that the map doesn't load.

On the other hand, in my project, add into gwt.xml still compile failed, because it doesn't support script tag, even with network connection. So, I have added script into home_page.html, but still failed to load the map. At the meantime, Window.alert also show up.

Connect to http://maps.google.com/maps/api/js?sensor=false in browser will get information as below

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"m@262000000",["https://mts0.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],[["http://khm0.googleapis.com/kh?v=149\u0026hl=zh-TW\u0026","http://khm1.googleapis.com/kh?v=149\u0026hl=zh-TW\u0026"],null,null,null,1,"149",["https://khms0.google.com/kh?v=149\u0026hl=zh-TW\u0026","https://khms1.google.com/kh?v=149\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"h@262000000",["https://mts0.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"t@132,r@262000000",["https://mts0.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=84\u0026hl=zh-TW\u0026","http://khm1.googleapis.com/kh?v=84\u0026hl=zh-TW\u0026"],null,null,null,null,"84",["https://khms0.google.com/kh?v=84\u0026hl=zh-TW\u0026","https://khms1.google.com/kh?v=84\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt/ft?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?hl=zh-TW\u0026","http://mt1.googleapis.com/vt?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt/loom?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt/ft?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt/loom?hl=zh-TW\u0026"]]],["zh-TW","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/16/11","3.16.11"],[662838505],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=149\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"zh-TW","US",null,18],0],[null,null,[null,"zh-TW","US",null,18],3],[null,null,[null,"zh-TW","US",null,18],6],[null,null,[null,"zh-TW","US",null,18],0],["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt"],2,500,["http://geo0.ggpht.com/cbk?cb_client=maps_sv.uv_api_demo","http://www.gstatic.com/landmark/tour","http://www.gstatic.com/landmark/config","/maps/preview/reveal?authuser=0","/maps/preview/log204","/gen204?tbm=map","http://static.panoramio.com.storage.googleapis.com/photos/"]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/16/11/main.js");
})();
Was it helpful?

Solution

How to add Google map for GWT into FormPanel?

Here is the code.

Simply call below line and the map is added in formPanel.

GoogleMap gMap = GoogleMap.create(formPanel.getElement(), options);

Some more configuration as defined below:

  • gwt.xml:

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

  • gwt-maps.jar in build path of the project.

Sample code:

public void onModuleLoad() {
    FormPanel formPanel = new FormPanel();
    formPanel.setWidth("500px");
    formPanel.setHeight("650px");

    RootPanel.get().add(formPanel);

    MapOptions options = MapOptions.create();

    options.setZoom(6);
    options.setMapTypeId(MapTypeId.ROADMAP);
    options.setDraggable(true);
    options.setMapTypeControl(true);
    options.setScaleControl(true);
    options.setScrollwheel(true);

    GoogleMap gMap = GoogleMap.create(formPanel.getElement(), options);

    gMap.setCenter(LatLng.create(58.378679, -2.197266));
}

screenshot:

enter image description here

OTHER TIPS

I've been using the branflake API for quite some time, and currently it's working fine one GWT 2.8.

https://mvnrepository.com/artifact/com.github.branflake2267/gwt-maps-api

However, it's no longer maintained, some I'm shopping around for an alternative. In the meantime, I recommend it. The only downside being that it's using the 3.1 API version, which is obsolete. I'll post back if I find a way forward with it, or if I find an alternative.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top