Example: Google Maps with SmartGWT

[mike.art1]

This might be of help for users looking to integrate Google Maps with SmartGWT.

What's neat is that we can display SmartGWT widgets inside the maps info window. If only I could attach images to the post. :(

public class HelloWorld implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		RootPanel.get().add(getViewPanel());
	}


	private MapWidget getMap() {		
		MapWidget map = new MapWidget();
		map.setSize("500px", "300px");
		map.addControl(new LargeMapControl());
		map.getInfoWindow().open(map.getCenter(), 
		        new InfoWindowContent(getMapInfoWindow()));		
		return map;
	}

	
	public Canvas getViewPanel() {
		HLayout hLayout = new HLayout(5);
		hLayout.addMember(new Label("Dummy Label in a Horizontal Layout"));
		// Add the map to the HTML host page
		hLayout.addMember(getMap());		
		return hLayout;
	}

	private Canvas getMapInfoWindow() {
        final TabSet topTabSet = new TabSet();
        topTabSet.setTabBarPosition(Side.TOP);
        topTabSet.setWidth(200);
        topTabSet.setHeight(100);

        Tab tTab1 = new Tab("Blue");
        
        HTMLPane tab1Pane = new HTMLPane();
        tab1Pane.setContents("Hello. This sample shows a google map widget taking part in a SmartGWT Layout");
        tTab1.setPane(tab1Pane);
        Tab tTab2 = new Tab("Green");
        HTMLPane tab2Pane = new HTMLPane();
        tab2Pane.setContents("Google Maps InfoWindow can display SmartGWT Widgets");
        tTab2.setPane(tab2Pane);

        topTabSet.addTab(tTab1);
        topTabSet.addTab(tTab2);
		return topTabSet;
	}
}

[bwalsh]

I've been able to do much the same thing.

I have been running into issues on resize. Have you ? Any solutions would be appreciated.

[mike.art1]

Haven't tried resizing. What issues have you run into?

[bwalsh]

resizing the map container works fine. However, if the browser itself is resized, I loose the map.

[bwalsh]

I have the map container set up as so ...

		mapContainer = new EmptyBox((String) null, "*", "height * '");
		mapContainer.setRedrawOnResize(false);
		mapContainer.setRedrawOnStateChange(false) ;

mapContainer is w/in a VLayout in turn w/ in a HLayout
It's left sibling has a resize bar. see see http://bwalsh.com/map-example.jpg

When resize happens map is fine.

However, when browser resize, I see the following :
- map redraws fine, shows for a sec or so
- map container is cleared.

[cretz]

Sorry to dig up an old thread...

This is the case on many of the map integrations. I generated my own widget for VirtualEarth and have the same problem with browser resizing. The issue is the divs Canvas is wrapping with. Unfortunately, there is no adding a standard widget accessing the DOM directly in SmartGWT without it converting it to a Canvas (WidgetCanvas to be exact).

If anyone has any insight on removing these divs or information in general about best practices for creating custom widgets in SmartGWT, please share.

[sjivan]

This is fixed in SVN.