How to add Google map for GWT into FormPanel

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

add(map);
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");
})();

Braj · Accepted Answer · 2014-05-11T07:11:04.780

2

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

edited May 11 '14 at 07:11

answered May 08 '14 at 14:02

Braj

46,415
5
60
76

Hi Braj, Thank you very much for your reply. I have tried your suggestion in my code as below: BaseWindow window = new BaseWindow(new mapWindowForm()); – user3616668 May 10 '14 at 19:55
When you call this line `GoogleMap gmap = googleMap.create(form.getElement(), options);` then created google map is already added into the `form`. Now just add this `form` anywhere because now it contains map inside it. – Braj May 10 '14 at 20:22
Got it~ I have tried again to add form into a window, but still not work. Thanks. – user3616668 May 10 '14 at 21:13
Try with sample code that I have already shared you. Simply add it in `RootPanel.get().add(formPanel)` – Braj May 10 '14 at 21:14
Always try with sample code first to understand it clearly then use it in your actual implementation. – Braj May 11 '14 at 03:33
I have updated my sample code with complete code. Just try it first. – Braj May 11 '14 at 04:37
Why have you created a typical class hierarchy? Do you actually need it? **Don't** extend any class until and unless you want to change the existing logic or behavior. – Braj May 11 '14 at 04:43
Excuse me, do you mean create a typical class hierarchy is I have extended windowForm from FormPanle and new windowForm()? or I have windowForm panel = new windowForm and new BaseWindow(panel);? Thanks – user3616668 May 11 '14 at 09:17
I have tried add in gwt.xml, but compile would be failed and indicate that shall be add into .html – user3616668 May 11 '14 at 09:20
I am really sorry. Respect **Design Pattern** that says **Favor composition over Inheritance** – Braj May 11 '14 at 09:28
Try with the jar that I shared you in links for gwt-maps. – Braj May 11 '14 at 09:35
**Why have you added `semicolon` in the end** of `` in your `gwt.xml`? `http://` is missing in URL that will result in 404. Please copy it from my post. – Braj May 11 '14 at 09:36
I have found out two possible mistakes that I have made. First, I have imported com.google.maps.gwt but add a gwt-maps-1.1.1.jar into my project. And I found that com.google.maps.gwt is for gwt-maps-3.8.1.jar and com.google.gwt.maps is for gwt-maps-1.1.1.jar. However, there are no error pop up when I import com.google.maps.gwt.client and add a gwt-maps-1.1.1.jar – user3616668 May 11 '14 at 11:36
one more that I mentioned in above comments. Isn't it? – Braj May 11 '14 at 11:37
Basically you are not following me. Always try with samples instead of applying it directly on your application that has problems already. – Braj May 11 '14 at 11:38
Second, the http:// is missing in URL as you said. But, the compiler still show up the gwt.xml doesn't support script tag after I add http:// into the script. This may because my laptop doesn't has network connection now? So even I add http:// into, it still result in 404, so the compile doesn't work. – user3616668 May 11 '14 at 11:39
I think it requires Network connection specially for Google Map. – Braj May 11 '14 at 11:42
Understood, will further try with network connection. I have tried the sample code in a new Google web application project, but got some error, may because I do the wrong setting of application project. – user3616668 May 11 '14 at 12:00
But, here comes up another question. Are there have some way to know the maps are correctly load? Maybe the network connection lost or API key not correctly, I need to show up some message and close the form. Thanks a lot. – user3616668 May 11 '14 at 12:03
Yes you can try with `GoogleMap#addIdleListener()`. Do you need code for this? – Braj May 11 '14 at 12:08
Yes, according to the usage scenario: When user click the device, get the device's lat and lng, locate at Google Map and show up Map. So, whatever the device doesn't has lat and lng or the Google Map API connection failed, all shall be exception handle and pop up message to user. – user3616668 May 11 '14 at 12:43
Have found a sample gMap.addIdleListener(new GoogleMap.IdleHandler() { @Override public void handle() { mapLoadingFail(); } }); – user3616668 May 11 '14 at 12:52
Have tried in a sample project, but also failed as above updated. And in my project, situation become more worse.. – user3616668 May 13 '14 at 07:42

score 0 · Answer 2 · answered Aug 20 '18 at 13:19

0

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.

answered Aug 20 '18 at 13:19

Andrew Somerville

11
1

Hey, this is super late, but i¨m just curious - do you still use Branflake maps? I do too, but i'm also weighing options. – Mathias Jun 23 '20 at 18:37

How to add Google map for GWT into FormPanel

2 Answers2