Issue 366 in gwt-google-apis: Google Map widget does not initialize correctly inside a LayoutPanel
gwt-goo...@googlecode.com
Owner: ----
Labels: Type-Defect Priority-Medium
New issue 366 by aute...@gmail.com: Google Map widget does not initialize
correctly inside a LayoutPanel
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Found in Release: 2.0.3, using Eclipse and plugins, all up to date on April
9th, 2010.
Windows 7, Google Chrome 4.1.249.1045 unknown (42898) (up-to-date on April
9th, 2010)
Detailed description:
If a MapWidget() is placed inside a LayoutPanel (e.g. DockLayoutPanel
inside RootPanel,
or directly in RootLayoutPanel()) then the map is not initialized correctly.
Map shows displaced with grey area surrounding it, adding markers and
calling
checkResizeAndCenter(), or changing center or zoom level do not correct it.
When adding a marker and recentering on that marker the map remains
displaced, and the
marker maybe outside the visible window.
I also tried a deferred command to center and resize it, and that doesn't
work either.
This can be reproduced, with a working (placed directly on Root) and not
working map
(inside a DockLayoutPanel then that on Root) on the same window using this
code:
---------------------------
public class UserApp implements EntryPoint {
private final String LOGO_URL = "logo_with_text_32.png";
// This is the entry point method.
public void onModuleLoad() {
AbsolutePanel panel = new AbsolutePanel();
panel.setSize("100%","300px");
MapWidget myMap = new MapWidget();
myMap.setSize("100%", "100%");
panel.add( myMap );
// HEADER PANEL
HorizontalPanel header = new HorizontalPanel();
header.addStyleName( "header" );
header.setWidth( "100%" );
HTML appName = new HTML( "Chasing Clothes User" );
appName.addStyleName( "app-name" );
header.add( appName );
Image logo = new Image();
logo.setUrl( LOGO_URL );
logo.addStyleName( "logo" );
header.add( logo );
// FOOTER
HTML footer = new HTML( "text" );
footer.addStyleName( "footer" );
RootPanel.get().add( header );
RootPanel.get().add( panel );
if ( true ) {
AbsolutePanel panel2 = new AbsolutePanel();
panel2.setSize("100%","300px");
MapWidget myMap2 = new MapWidget();
myMap2.setSize("100%", "100%");
panel2.add( myMap2 );
// LAYOUT PANEL - for header, navigation, data entry and footer
DockLayoutPanel layout = new DockLayoutPanel( Unit.PX );
layout.addNorth( panel2, 500 );
RootPanel.get().add( layout );
}
// RootPanel.get().add( layout );
RootPanel.get().add( footer );
}
I have attached a screen shot of that output.
---------------------------
Workaround if you have one:
The only workaround I have seen, is for the user to resize the browser
windows (de-
maximize, then maximize) which causes
Links to the relevant GWT Developer Forum posts:
http://groups.google.com/group/gwt-google-
apis/browse_thread/thread/d3c5dde09ece2fdf/1abb823fdd50d6cb
Attachments:
Capture.JPG 85.9 KB
--
You received this message because you are listed in the owner
or CC fields of this issue, or because you starred this issue.
You may adjust your issue notification preferences at:
http://code.google.com/hosting/settings
gwt-goo...@googlecode.com
Status: Accepted
Labels: API-Maps
Comment #1 on issue 366 by zun...@google.com: Google Map widget does not
initialize correctly inside a LayoutPanel
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
(No comment was entered for this change.)
gwt-goo...@googlecode.com
Comment #2 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
or any
update?
--
You received this message because you are subscribed to the Google Groups "galgwt-issue-notifications" group.
To post to this group, send email to galgwt-issue-...@googlegroups.com.
To unsubscribe from this group, send email to galgwt-issue-notifi...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/galgwt-issue-notifications?hl=en.
gwt-goo...@googlecode.com
Comment #3 on issue 366 by ajzeneski: Google Map widget does not initialize
Anyone have any workaround for this?
gwt-goo...@googlecode.com
Comment #4 on issue 366 by lee.st...@vodafone.com: Google Map widget does
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
the user to
resize their browser.
I don't know if anyone knows of a way to do this resize automatically (I'd
rather the
user see their browser change size, then return to how it was than see a
dodgy looking
map).
I'd also be interested to know if there is any time-scale to fixing this
bug.
Thanks
gwt-goo...@googlecode.com
Status: ReviewPending
Owner: zun...@google.com
Comment #5 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
resizeAndCenter() after the map is attached to the DOM. I also wired up the
RequiresResize interface so that when the widget is resize the map will
expand to
fill its container.
http://gwt-code-reviews.appspot.com/554801/show
gwt-goo...@googlecode.com
Comment #6 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
gwt-goo...@googlecode.com
Status: FixedNotReleased
Comment #7 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
gwt-goo...@googlecode.com
Status: Fixed
Comment #8 on issue 366 by piotr.swigon: Google Map widget does not
initialize correctly inside a LayoutPanel
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
(No comment was entered for this change.)
gwt-goo...@googlecode.com
Comment #9 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I haven't followed a bug so closely before and don't know which bug states
Google
implements..... will this bug get a further update when a version is
released that
fixes it - so I can update the API I'm using and get the fix?
Thanks.
gwt-goo...@googlecode.com
Comment #10 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
We released gwt-maps-1.1 last week, and when we did that, we updated the
status to
"Fixed". This was the last bug we fixed before the release, and the blog
post still
hasn't gone out, so it happened very quickly :-)
gwt-goo...@googlecode.com
Comment #11 on issue 366 by vipul.jain0: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Hello,
I am facing the same problem. I am trying to use checkResizeAndCenter()
method, but it is no use for me. Still i am facing the same issue as some
tiles are missing from map.
Right now i am using gwt-maps-1.1, GWT-2.0.1, GXT-2.0.1.
Any suggestion?
gwt-goo...@googlecode.com
Comment #12 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I notice that it HAS fixed the issue as demonstrated in the code I put in
the defect submission to reproduce it easily.
However, I not it HAS NOT fixed the issue in my real application code,
which is a more complicated nesting of panels....
So, I suspect it´s only a partial fix...
Next week I will try and produce code to reproduce the error as my
application shows it and add that to the submission here.
gwt-goo...@googlecode.com
Comment #13 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
On further investigation I see:
- sample code to reproduce issue works correctly in Chrome and Firefox
- it IS fixed in my application code, on Chrome
- issues remain in my application code, on Firefox
but....I have other layout issues/differences between Chrome and Firefox in
my application, so I can't be sure it's not my problem....
As you can see in the screen shot though, the map is diplaced/tiles missing
(as originally reported) INSIDE the widget I layout.... and I don't think
my code can influence that .... so maybe there is still something left that
is sensitive to the widgets the map widget is placed within, that only
appears on Firefox?
Attachments:
chrome.png 146 KB
firefox.png 93.3 KB
gwt-goo...@googlecode.com
Comment #14 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Could it be that your layout depends on HTML strict mode <!doctype html>
and it is set to quirks mode (or vice versa).
gwt-goo...@googlecode.com
Comment #15 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Here is the header of my HTML page for this app (EntryPoint)....
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="/admin/css/admin.css">
<link type="text/css" rel="stylesheet"
href="/admin/css/ScrollTable.css">
<link rel="icon" type="image/ico" href="/admin/icons/favicon.ico" />
<title>Chasing Clothes Admin</title>
<script type="text/javascript" language="javascript"
src="/admin/admin.nocache.js"></script>
<script
src="http://maps.google.com/maps?gwt=1&file=api&v=2&key=ABQIAAAAeW8nVYzVTgpW6XGAZ6EVWBRcnlKWexnaIuGXzG-054BucM78mRQIZZFNepX8UsQqoU30lJ3EjmCEcA"></script>
</head>
As you can see, it is in strict mode. If this could cause a problem with
Firefox for this particular widget (and maybe some of my other problems?) I
don't know...
If you have any suggestions regarding this I can test them.
Thanks
gwt-goo...@googlecode.com
Comment #16 on issue 366 by chris.roat: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I do not believe this is fully fixed. In strict mode using a
TabLayoutPanel with UIBinder, I'm seeing the same issue on
Mac OS X 10.5.8 (9L31a),
Eclipse 20100218-1602,
JVM 1.6.0
gwt-maps-1.1.0
Google Plugin for Eclipse 3.5 1.3.3.v201006111302,
Google Web Toolkit SDK 2.0.4 2.0.4.v201006301254,
Google App Engine Java SDK 1.3.5.v201006301254.
Viewing with Safari Version 5.0 (5533.16).
Layout.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:gm="urn:import:com.google.gwt.maps.client">
<ui:style>
.map {
width: 500px;
height: 350px;
}
</ui:style>
<g:TabLayoutPanel barHeight='40'>
<g:tab>
<g:header>Home</g:header>
<g:Label>Home</g:Label>
</g:tab>
<g:tab>
<g:header>Map</g:header>
<gm:MapWidget ui:field="map" styleName="{style.map}" />
</g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
Layout.java
package com.example.map.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class Layout extends Composite {
private static LayoutUiBinder uiBinder = GWT.create(LayoutUiBinder.class);
interface LayoutUiBinder extends UiBinder<Widget, Layout> {}
@UiField MapWidget map;
public Layout() {
initWidget(uiBinder.createAndBindUi(this));
}
}
Map.java
package com.example.map.client;
import com.example.map.client.Layout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.Maps;
import com.google.gwt.user.client.ui.RootLayoutPanel;
public class Map implements EntryPoint {
public void onModuleLoad() {
Maps.loadMapsApi("", "2", false, new Runnable() {
public void run() {
Layout layout = new Layout();
RootLayoutPanel.get().add(layout);
}
});
}
}
Map.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Map Wackiness</title>
<script type="text/javascript" language="javascript"
src="map/map.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left:
-11em; color: red; background-color: white; border: 1px solid red; padding:
4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
Attachments:
GWT MapWidget in TabLoyoutPanel.png 27.1 KB
gwt-goo...@googlecode.com
Comment #17 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
FYI - I also use TabLayoutPanel.
gwt-goo...@googlecode.com
Status: Accepted
Comment #18 on issue 366 by zun...@google.com: Google Map widget does not
initialize correctly inside a LayoutPanel
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Here's a forum discussion
https://groups.google.com/group/gwt-google-apis/browse_thread/thread/5d331e14923f9343
Essentially - every widget all the up the hierchy to the MapWidget needs to
implement RequiresResize.
For a TabLayoutPanel, you may need to catch the selection event and
manually call map.checkResizeAndCenter(), possibly inside a timer or
deferred command.
I'm not sure what the Map can do to tell that it is inside a Tab panel and
react appropriately. I'm wondering if there a native DOM event I could
look for?
gwt-goo...@googlecode.com
Comment #19 on issue 366 by g.georgovassilis: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Happens also when you are adding a map widget to a SimplePanel which was
obtained through a wrap()
gwt-goo...@googlecode.com
Comment #20 on issue 366 by ericzundel: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
For this updated feature to work, your panel needs to implement
RequiresResize. SimplePanel and AbsolutePanel do not. DockLayoutPanel
does.
gwt-goo...@googlecode.com
Comment #21 on issue 366 by g.georgovassilis: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Thank you Eric, that's it. By adding the map first to a DockLayoutPanel and
then that panel to the SimeplPanel it worked.
gwt-goo...@googlecode.com
Comment #22 on issue 366 by stuartmo...@gmail.com: Google Map widget does
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Clarification required:
In Comment 21, George had success by adding the map to a DockLayoutPanel,
then to a SimplePanel (and presumably the SimplePanel was attached to
RootLayoutPanel).
But in Comment 18 we are advised to make sure the hierarchy of widgets all
implement RequireResize.
So, the clarification I need is:
- Did George implement a RequireResize on a SimplePanel?
OR
- Do we only need to nest the map into a parent widget that implements
RequireResize, and not worry about parent widgets all the way up to
RootLayoutPanel?
gwt-goo...@googlecode.com
Comment #23 on issue 366 by stuartmo...@gmail.com: Google Map widget does
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
No need for clarification, my problem is solved.
In my case, the map was presenting the same issue, but it was not nested
inside a TabLayoutPanel. However, it was inside a complex series of nested
UiBinder-driven layouts, in HTML strict mode, attached to a RootLayoutPanel.
When the map was in a Ui that was always shown when the application first
loaded, it was fine. When the map was shown in a UI that the user had to
trigger to show, it presented the same initialization problem.
Since the Ui triggering the map view did not have a direct handle on the
map widget, my fix was to fire a custom event from the triggering Ui, catch
it in the Ui holding the map, and wrap the checkResizeAndCenter() in a
single DeferredCommand.
There was no need to wrap it in a double-deferred command as suggested
here: https://groups.google.com/group/gwt-google-apis/msg/4c9fc37e03062a7b
Note: I tried the doubly-nested version first, which worked, but had a
visually noticeable delay.
Some of the widgets in hierarchy did not have ResizeRequired, and I was not
forced to implement it on any parent of the map widget.
Environment:
- Maps API Library for GWT 1.1.0
- GWT 2.0.3
- Working under Hosted Mode in Eclipse 3.5.2
- Mozilla Firefox for Ubuntu 3.6.6
- Ubuntu 10.04 LTS (Lucid Lynx)
gwt-goo...@googlecode.com
Comment #24 on issue 366 by g.georgovassilis: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Unfortunatelly the case I'm looking at was harder to fix. While Firefox
poses the least of all problems, Safari insists on displaying the grey area
unless the map is resized via a deferred command. In order to preserve the
original size, I had to resize it twice times with two different deferred
command (i.e. make smaller and then restore to original size).
IE 7 (for that matter, any IE6 compatible compile output) will refuse to
draw the map if placed in a DockLayoutPanel - the only fixes I found is to
_not_ put the map into a layouting widget and instead either apply
the "shake" fix used with Safari or trick GWT into outputting IE8 code.
gwt-goo...@googlecode.com
Comment #25 on issue 366 by vinayakravi: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
This is what I did -
tabLayoutPanel.addSelectionHandler(new SelectionHandler<Integer>() {
@SuppressWarnings("deprecation")
public void onSelection(SelectionEvent<Integer> event) {
if(event.getSelectedItem()==1) {
DeferredCommand.addCommand(new Command() {
public void execute() {
aView.map.checkResizeAndCenter();
}
});
}
else if(event.getSelectedItem()==3) {
DeferredCommand.addCommand(new Command() {
public void execute() {
bView.map.checkResizeAndCenter();
}
});
}
}
});
gwt-goo...@googlecode.com
Comment #26 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I have moved by code to use UiBinder and I still have the problem.
I am now using GWT2.1 and I note that trying the latest solution offered
that DeferredCommand() is deprecated. :-(
gwt-goo...@googlecode.com
Comment #27 on issue 366 by g.georgovassilis: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Hi there,
Nope, it's not - up to me knowledge, the only reliable, cross-browser valid
way of getting rid of the gray areas was and still is to "shake" the map by
programmatically resizing it (really, you need to take the outer container
and the map and resize them both) with a deferred command. In GET 2.1 you
just need to take whatever replaced DeferredCommand (I think it's called
Scheduler).
gwt-goo...@googlecode.com
Comment #28 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Still fighting against this bug. Scheduling a deferred resize and center
has NOT fixed the bug for me.
Can't find a way to resize the enclosing VerticalPanel that will fix it.
Any update on a fix or reliable workaround please?
gwt-goo...@googlecode.com
Comment #29 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
Hack complete: At least in some cases I have tested so far, this (where
panel is a verticalpanel) seems to fix it...
Scheduler sch = Scheduler.get();
sch.scheduleDeferred( new Scheduler.ScheduledCommand() {
@Override
public void execute() {
panel.setVisible( true );
map.checkResizeAndCenter();
}
});
gwt-goo...@googlecode.com
Status: Fixed
Comment #30 on issue 366 by zun...@google.com: Google Map widget does not
initialize correctly inside a LayoutPanel
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I'm not planning any future changes for this. If you are trying to use a
XXXLayoutPanel inside of a VerticalPanel, that is likely your problem. As
I mentioned before Layout panels require an unbroken chain of widgets from
RootLayoutPanel that correctly implement the RequiresResize interface, and
VerticalPanel does not do this.
I can't reproduce the issue. If you are still having problems, try the
Scheduler.scheduleDeferred() trick that you so often have to use with the
Maps API. If you have a specific problem on a specific browser, please
post a message to the gwt-google-apis group so we can narrow it down. The
answer could be to create an alternate MapWidget that uses an embedded
LayoutPanel instead of a FlowPanel to contain the Map.
gwt-goo...@googlecode.com
Comment #31 on issue 366 by aute...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
I can state that this defect is not fixed, so at most I would suggest the
status "Won't Fix" or equivalent.
I don't understand what you mean by "If you are trying to use a
XXXLayoutPanel inside of a VerticalPanel, that is likely your problem."
- If VerticalPanel is the source of the problem, what LayoutPanel do you
recommend we use with MapWidget?
"As I mentioned before Layout panels require an unbroken chain of widgets
from RootLayoutPanel that correctly implement the RequiresResize interface,
and VerticalPanel does not do this."
- Does that imply we should consider that a defect, or at least an
enhancement request, for VerticalPanel?
I continue to have the problem in two different widget layouts even when
using a number of the workarounds mentioned here, including the deferred
command for resize and center.
My widget trees down to the MapWidget are:
- Root
+ TabLayoutPanel
+ DockLayoutPanel
+ VerticalPanel
+ MapWidget
- Root
+ TabLayoutPanel
+ ScrollPanel
+ VerticalPanel
+ VerticalPanel
+ VerticalPanel
+ MapWidget
Note that neither use FlowPanel.
If I heard a willingness to fix the bug I might try and produce reduced
code I can share in order to reproduce it, like the original post.
It seems to behave unpredictably (sometimes working, possibly due to
timing??) when in development mode, but behaves predictable (always
failing) when GWT compiled, locally or deployed (GAE).
If we produce code to reproduce it, would you consider fixing?
What constraints would you place on our code to reproduce it?
e.g. Not using VerticalPanel only?
gwt-goo...@googlecode.com
Comment #32 on issue 366 by zun...@google.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
The reference to FlowPanel is an internal widget kept inside of MapWidget
as a container.
Please follow up to google-web-toolkit or gwt-google-apis mailing list. By
all means post code, but It is my understanding that by mixing and matching
the xxLayout widgets and legacy widgets like VerticalPanel, you are going
to get unpredictable results (Comment #18 above and related forum
discussion). This fix changes MapWidget to respond to the RequiresResize
method that all the XXLayoutwidgets require. This interface must be
implemented by all widgets in the hierarchy for resizes to propagate
properly, but legacy widgets like VerticalPanel don't implement it, so
there is no way for this fix to be invoked in the hierarchy you suggested.
Others have removed the VerticalPanel and other legacy container widgets
from their app and reported the problem fixed.
gwt-goo...@googlecode.com
Comment #33 on issue 366 by gabvaz...@gmail.com: Google Map widget does not
http://code.google.com/p/gwt-google-apis/issues/detail?id=366
public static void centrarMapa(String busqueda){
final String eo=busqueda;
mashupService.getLocation(busqueda,
new AsyncCallback<GeoSearch>() {
@Override
public void onSuccess(GeoSearch result) {
//Window.alert("Latitud:--> " +getLatGeo(result));
// showGeolocalizacion(noticia, result);
LatLng centrar= LatLng.newInstance(getLatGeo(result),
getLngGeo(result));
mapa.triggerResize();
mapa.setCenter(centrar);
Window.alert("Esta es la busqueda : " + eo + "Esta es la latitud y
longitud : " + getLatGeo(result).toString() + getLngGeo(result).toString());
}
@Override
public void onFailure(Throwable caught) {
// TODO Auto-generated method stub
statusLabel.setText("Fallo en GeoLocalización");
}
});
when I want to display the map again i put this : " mapa.triggerResize(); "
I fix the problem with that. Of course you must to have a variable before
that save all changes.
--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings