Re: Maps v3 + GWT using JSNI - Map showing problem -
I've just printed the Element that I use to contain the map (System.err.println(container.getElement())) and these are the results: When the map works: container: div style=width: 600px; height: 600px; /div When it doesn't work: container non va: div style=width: 600px; height: 600px; position: relative; background-color: rgb(0, 0, 0); overflow-x: hidden; overflow- y: hidden; class=mapStylediv style=position: absolute; left: 0px; top: 0px; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; z-index: 0; div style=position: absolute; left: 0px; top: 0px; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; z-index: 0; div style=position: absolute; left: 0px; top: 0px; z-index: 1; cursor: url(http://maps.gstatic.com/intl/it_it/ mapfiles/openhand_8_8.cur), default; -webkit-transform: translate(0px, 0px) scale(1); div style=z-index: 100; position: absolute; left: 0px; top: 0px; div style=position: absolute; left: 0px; top: 0px; z-index: 0; div style=position: absolute; left: 0px; top: 0px; z- index: 1; div style=width: 256px; height: 256px; position: absolute; left: 172px; top: 172px; /divdiv style=width: 256px; height: 256px; position: absolute; left: -84px; top: 172px; / divdiv style=width: 256px; height: 256px; position: absolute; left: 172px; top: -84px; /divdiv style=width: 256px; height: 256px; position: absolute; left: 172px; top: 428px; /divdiv style=width: 256px; height: 256px; position: absolute; left: 428px; top: 172px; /divdiv style=width: 256px; height: 256px; position: absolute; left: -84px; top: -84px; /divdiv style=width: 256px; height: 256px; position: absolute; left: -84px; top: 428px; / divdiv style=width: 256px; height: 256px; position: absolute; left: 428px; top: -84px; /divdiv style=width: 256px; height: 256px; position: absolute; left: 428px; top: 428px; /div/div/div/ divdiv style=z-index: 101; position: absolute; left: 0px; top: 0px; /divdiv style=z-index: 102; position: absolute; left: 0px; top: 0px; div style=position: absolute; left: 0px; top: 0px; z-index: 1; div style=position: absolute; left: 0px; top: 0px; z-index: 1; div style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: 172px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: 172px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: -84px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: 428px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: 172px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: -84px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: 428px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: -84px; / divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: 428px; / div/div/div/divdiv style=z-index: 103; position: absolute; left: 0px; top: 0px; div style=position: absolute; left: 0px; top: 0px; z-index: -1; div style=position: absolute; left: 0px; top: 0px; z-index: 1; div style=width: 256px; height: 256px; overflow- x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: 172px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: 172px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: -84px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 172px; top: 428px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: 172px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: -84px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: -84px; top: 428px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: -84px; /divdiv style=width: 256px; height: 256px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 428px; top: 428px; /div/div/div/divdiv style=z-index: 104; position: absolute; left: 0px; top: 0px; /divdiv style=z-index: 105; position: absolute; left: 0px; top: 0px; /divdiv style=z-index: 106; position: absolute; left: 0px; top: 0px; /divdiv style=position: absolute; z-index: 0; left: 0px; top: 0px; div style=overflow-x: hidden; overflow-y: hidden; /div/divdiv style=position:
Maps v3 + GWT using JSNI - Map showing problem -
Hi everybody!
I need to use maps v3 API with GWT, but I've a problem on map showing.
I created a custom map (with a custom image) in this way:
public class MapContainer{
public native JavaScriptObject creaImageMap(Element e, String
path, String imageName, int zoomMax, int zoomStart, boolean navMap,
boolean draggable, boolean zooming, boolean controls) /*-{
function ImageProjection() {};
ImageProjection.prototype.fromLatLngToPoint = function(latlng) {
var origine=256/2;
var pplon=256/360.0;
var pplat=256/180.0;
var x=Math.round(((origine)+(latlng.lng()*pplon)));
var y=Math.round(((origine)-(latlng.lat()*pplat)));
return new $wnd.google.maps.Point(x, y);
};
ImageProjection.prototype.fromPointToLatLng = function(point) {
var origine=256/2;
var glonpp=360/(256);
var glatpp=180/(256);
var lat=((origine)-point.y)*(glatpp);
var lon=(((-1)*(origine))+point.x)*(glonpp);
return new $wnd.google.maps.LatLng(lat, lon);
};
var imageMap;
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var tiles = 1 zoom; // รจ equivalente a
2^zoom
// Don't wrap tiles
if (coord.y 0 || coord.y = tiles) {
return null;
}
if (coord.x 0 || coord.x = tiles) {
return null;
}
var x = coord.x;
var y=coord.y;
var nome=t;
for(k=0;kzoom;k++){
tiles=tiles/2;
if(ytiles){
if(xtiles){
nome+=q;
}
else{
nome+=r;x-=tiles;
}
}
else{
if(xtiles){
nome+=t;y-=tiles;
}
else{
nome+=s;x-=tiles;y-=tiles;
}
}
}
var
immagine=percorso+nomeImage+'-tiles/'+nome+'.jpg';
return immagine;
},
tileSize: new $wnd.google.maps.Size(256, 256),
isPng: true,
minZoom: 0,
maxZoom: zoomMax,
name: 'Image'
});
imageMapType.projection = new ImageProjection();
if(navMap){
var omcOptions={
opened: true,
}
var mapOptions = {
backgroundColor:#00,
zoom: zoomStart,
center: new
$wnd.google.maps.LatLng(0,0),
overviewMapControl: true,
overviewMapControlOptions: omcOptions,
draggable: draggable,
disableDoubleClickZoom: !zooming,
scrollwheel: zooming,
zoomControl: controls,
panControl: controls,
mapTypeControl: controls,
mapTypeControlOptions: {
mapTypeIds: ['imageMap']
}
};
}
else{
var mapOptions = {
backgroundColor:#00,
zoom: zoomStart,
center: new
$wnd.google.maps.LatLng(0,0),
draggable: draggable,
disableDoubleClickZoom: !zooming,
Re: Maps v3 + GWT using JSNI - Map showing problem -
If I use it directly in onModuleLoad method, in this way it looks
right:
***
private MapContainer mapContainer=null;
private SimplePanel container=new SimplePanel();
private JavaScriptObject mappa=null;
container.setSize(400px, 400px);
mappa=mapContainer.creaDipintoMap(container.getElement(),/
path/,image,4, 0, true, true, true, true);
DockLayoutPanel layout=new DockLayoutPanel(Unit.EM);
layout.add(container);
RootLayoutPanel.get().add(layout);
But if I use another class that returns a panel containing a map in
this way:
public class getPanel {
public VerticalPanel getPanelMethod(String image){
VerticalPanel a=new VerticalPanel();
VerticalPanel container=new VerticalPanel();
MapWidget mc=new MapWidget();
container.setSize(400px, 400px);
JavaScriptObject
mappa=mc.creaDipintoMap(container.getElement(),/
path/, image,4, 0, true, true, true, true);
a.add(container);
return a;
}
}
__
RootLayoutPanel.get().add(new getPanel().getPanelMethod(imageName));
my map doesn't work.
I also realized that in the second panel there is a listbox for the
map types and zoom control doesn't work.
How can I solve this problem?
Thanks for your help!!!
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
