Google Maps -> Problems when viewing the map

[LFCPD]

Hi all,

I am using Google Maps and I have a little problem.... I thought it
was my PC, but I've tested it in another PC and the same thing
occurs... I downloaded the api for the Google Maps from the following
link: http://www.gwtsite.com/google-api-library-for-gwt/

The problem is that the map is not shown well, it seems like it
doesn't refresh correctly...

My code is the following one:

//Creating the panel that contains the map
[...]

private final MapWidget map = new MapWidget();
final VerticalPanel endpointsMapPanel = new VerticalPanel();
endpointsMapPanel.setSize("100%", "100%");
map.setZoomLevel(7);
map.addControl(new SmallZoomControl());
map.addControl(new ScaleControl());
endpointsMapPanel.add(map);
map.setStyleName("map");
map.setSize("370px", "370px");

[...]

//Adding markers
double lat = 32.56;
double lng = -4.0;
final LatLng point = new LatLng(lat, lng);
Marker marker = new Marker(point);
map.addOverlay(marker);
map.setCenter(point);
marker.addClickListener(new MarkerClickListener()
{
public void onClick(Marker sender) {
map.setCenter(point);
map.getInfoWindow().open(point, new
InfoWindowContent("Endpoint IP: " + ip + ...));
}

public void onDoubleClick(Marker sender) {
map.setCenter(point);
map.getInfoWindow().open(point, new
InfoWindowContent("Endpoint IP: " + ip + ...));
}
});

When I run the application the map viewed is the following one:
http://www.imagebam.com/image/b884769564450

The map is not refresh and the endpoint is not in the center of the
panel.

Can anybody help me, please?

Regards,

Laia

[Eric Ayers]

An updated version of gwt-google-apis is found at:

http://code.google.com/p/gwt-google-apis/downloads/list?can=1&q=maps

This version requires GWT 1.5.

The way you describe your problem and the way your image looks, it
looks similar to a problem reported before with GWT-Ext:

http://code.google.com/p/gwt-google-apis/issues/detail?id=127&can=1&q=gwt-ext

Are you using GWT-Ext? Or it could just be that your tiles are slow
to load (but you should see a message saying the tile cannot be
loaded.)

-Eric.

--
Eric Z. Ayers - GWT Team - Atlanta, GA USA
http://code.google.com/webtoolkit/

[LFCPD]

Hi Eric,

Thank you for the response.

I'm not using GWT-Ext, should I use it?

I tried to update both versions (GWT and gwt-google-apis) and I still
have the same problem. I checked the link
http://code.google.com/p/gwt-google-apis/issues/detail?id=127&can=1&q...
, but I'm not sure if the problem is the same because I set the size
and the panel I add the MapWidget is a simple VerticalPanel from the
GWT (not a Panel from GWT-Ext). However it seems like if the center of
the map is not centered in the center of the VerticalPanel...

Any idea?

Thanks in advance!

[Eric Ayers]

Do you have any styling on the map or surrounding widgets to do positioning? For example - maybe there is a negative absolute position for x or y?

2008/7/21 LFCPD <laieta.h...@gmail.com>:

[LFCPD]

Hi Eric,

This is my java code:

// MAP

final VerticalPanel endpointsMapPanel = new VerticalPanel();

verticalPanel_1.add(endpointsMapPanel);

endpointsMapPanel.setSize("100%", "100%");
map.setZoomLevel(7);
map.addControl(new SmallZoomControl());
map.addControl(new ScaleControl());
endpointsMapPanel.add(map);
map.setStyleName("map");
map.setSize("370px", "370px");

And here the css style:

//CSS
.map {
width: 410px!important;
height: 410px!important;
width: 390px;
height: 370px;
margin: 20px!important;
margin: 30px 10px 20px 20px;
}

That could be the problem?

Thanks again! :)

Laia

[Eric Ayers]

Some of the code is missing, but I created the following EntryPoint
class and I don't see a problem in the resulting map (using Linux:):

public class MapsTutorial implements EntryPoint {

private MapWidget map;

// GWT module entry point method.
public void onModuleLoad() {

MapWidget map = new MapWidget();

final VerticalPanel endpointsMapPanel = new VerticalPanel();

endpointsMapPanel.setSize("100%", "100%");

map.setZoomLevel(7);
map.addControl(new SmallZoomControl());
map.addControl(new ScaleControl());
endpointsMapPanel.add(map);
map.setStyleName("map");
map.setSize("370px", "370px");

// Add the map to the HTML host page
RootPanel.get("mapsTutorial").add(endpointsMapPanel);
}
}

I don't quite understand your CSS styling - the size seems to
contradict the map.setSize() call for example.

--

[LFCPD]

Hi Eric,

You were right, the size was set twice, but that's not the problem,
because deleting it the same grey area appears.

// MAP
final VerticalPanel endpointsMapPanel = new VerticalPanel();
verticalPanel_1.add(endpointsMapPanel);
endpointsMapPanel.setSize("100%", "100%");
map.setZoomLevel(7);
map.addControl(new SmallZoomControl());
map.addControl(new ScaleControl());
endpointsMapPanel.add(map);
map.setStyleName("map");

The VerticalPanel endpointsMapPanel is inside another vertical panel
that contains more widgets, this one is inside a TabPanel and this one
inside another VerticalPanel that is the child from the Root panel.

My CSS is like this because in Firefox is shown different from IE:

.map {
width: 410px!important;
height: 410px!important;
width: 390px;
height: 370px;
margin: 20px!important;
margin: 30px 10px 20px 20px;
}

I'm using windows, I don't know if this could be the problem.... :(

In the map I put some markers, and these ones should be in the center
of the map when I click on them, but it seems that they are not in the
center.... you can see it in the following image:
http://www.imagebam.com/image/0830269878645. The following code is to
add the markers:

//Create a marker
LatLngCallback callback = new LatLngCallback()
{
public void onFailure() {
// TODO Auto-generated method stub
}

public void onSuccess(final LatLng point) {

Marker marker = new Marker(point);
map.addOverlay(marker);
map.setCenter(point);
marker.addClickListener(new MarkerClickListener()
{
public void onClick(Marker sender) {
map.setCenter(point);
map.getInfoWindow().open(point, new InfoWindowContent("Endpoint IP:

" + ip + ". Location: " + address));

}

public void onDoubleClick(Marker sender) {
map.setCenter(point);
map.getInfoWindow().open(point, new InfoWindowContent("Endpoint IP:

" + ip + ". Location: " + address));
}
});
}
};

FactualGeocodeCache cache = new FactualGeocodeCache();
Geocoder geocoder = new Geocoder(cache);
geocoder.getLatLng(address, callback);

Thanks,

Laia

[Eric Ayers]

My best suggestion at this point is to start with something simple,
like the example I mailed to you, and try building your app back up.
At some point, a CSS style or bounding widget must have done this
terrible thing to your app.

-Eric.

--

[LFCPD]

Hi Eric,

You're right, but first le me explain you a curious thing that I
discovered:
- In Firefox: when I resize the window (making it smaller) and after I
maximize it again, the map is shown perfectly and the marker centered
in the map.
- In IE: when I resize the window makint it smaller, the map is shown
perfectly and the marker centered in the map, and after if I maximize
it, the map is still shown perfectly.

Could it be because of the margin? Or because of setting the size? Any
idea?

Thank you very much for all your help.

Regards,
Laia

[Eric Ayers]

Part of what I think is going on here is that the maps API fetches
tiles that are just off screen, so that when you scroll a little bit,
you don't have to wait for a new tile to be fetched. When you
maximize, you fetch in a bunch of new tiles. Then, when you go back
to the previous size, the tiles are still there because they are
cached. But I can't explain the centering issue... I didn't see a
call to map.setCenter() or your MapWidget constructor.

--

[LFCPD]

I center the map when I create the markers. In the application there
are some markers stored in the DB, and for each one I create a marker
like this:

long lat = ...
long lng = .... //lat and lng are from each point stored in DB

final LatLng point = new LatLng(lat, lng);

Marker marker = new Marker(point);
map.addOverlay(marker);
map.setCenter(point);
marker.addClickListener(new MarkerClickListener()
{
public void onClick(Marker sender) {
map.setCenter(point);
map.getInfoWindow().open(point, new InfoWindowContent("Endpoint IP:

" + ip + ". GC: " + gc));
}
});

[Guillem]

I don't know if you already fixed this, but I'll share what I've
found.

In my app, I add MapWidgets at runtime, all with setVisible(false).
By clicking on a link, you can show or hide any of the MapWidgets, but
all
MapWidgets added this way were having the same problem you report.
What I did to fix this is to add a checkResize() call after
setVisible(true).
This solved the problem.


Example:

final MapWidget map = new MapWidget();
map.setVisible(false);

Button b = new Button("Show", new ClickListener(){
public void onClick(Widget arg0) {
map.setVisible(true);
map.checkResize();
}
});

RootPanel.get().add(map);
RootPanel.get().add(b);
Hope this helps.

[LFCPD]

Hi Guillem!

It was that! Thank you very much! :D

[Einstein0970]

Thanks Guys, the map.checkResize(); solved my poblem too.

- Erick

[Micky]

Bingo Guillem! Thanks.