-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi, I'm trying to implement gmaps for first time in my application. I follow the demo and it works fine but now I want to controll the gmap component from my GenericForwardComposer. I try to insert a gmarker but it doesn't appear in my map.
This is the code I'm using.
The zul has the gmaps (without a key):
<gmaps id="MapaLocalizacion" version="3.5" width="100%" height="100%" showsmallctrl="true"/>
And my java class has this method
private void MostrarDatosLocalizacion(){
MapaLocalizacion.setCenter(41.44018, 2.19972);
Gmarker markerInicio = new Gmarker("",41.44018,2.19972);
markerInicio.setParent(MapaLocalizacion);
}
As I said, no marker is represented in the map. If I try to open it with markerInicio.setOpen(true) it gives me this javascript error:
Fallo al procesar
setAttr
Cannot call method 'set' of null (TypeError)
Am I missing something? There's something more I have to do?? I really need some help please.
Thank you!
EDIT: I realize that it happens when I call MostrarDatosLocalizacion() from an event provoked using echoEvent(). Why? Can it be solved?
I was able to make a reproducible code for the error. Try this: zul
<zk>
<div id="divMapa" apply="org.sts.Pruebas.PruebagMaps.Mapa">
<gmaps id="map" width="500px" height="500px" lat="35" lng="-110" />
</div>
</zk>
composer
package org.sts.Pruebas.PruebagMaps;
import org.zkoss.gmaps.Gmaps;
import org.zkoss.gmaps.Gmarker;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Div;
/**
* Tested with ZK 6.0.2 and ZK Pivottable 2.0.0
*
*/
public class Mapa extends GenericForwardComposer {
private Gmaps map;
private Div divMapa;
private double lat = 35;
private double lng = -110;
public void onCreate() {
System.out.println("Hola onCreate!");
Events.echoEvent("onProbar", divMapa, null);
}
public void onProbar$divMapa () {
System.out.println("***********************Hola onAddMarker!");
Gmarker marker = new Gmarker();
lat += 0.001;
lng += 0.001;
marker.setLat(lat);
marker.setLng(lng);
marker.setParent(map);
map.setCenter(lat, lng);
}
}
I must post it as a bug???
@Neus
This issue is caused by two reasons,
Echo event call js method in different way, if you call onProbar$divMapa directly instead of use echo event then it works well. I didn't dig it deeper however.
The gap between Gmaps life cycle and ZK widget life cycle. The setters are called too early since Gmaps need to wait until Google Maps API loaded.
As a workaround, you can try call method directly without echo event, or try to fire an event after Gmaps ready then use echo event as below:
test.zul
<zk xmlns:w="client">
<div id="divMapa" apply="test.TestComposer">
<gmaps id="map" width="500px" height="500px" lat="35" lng="-110"
use="test.CustomGmaps" />
</div>
</zk>
TestComposer.java
package test;
import org.zkoss.gmaps.Gmarker;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Div;
/**
* Tested with ZK 6.0.2 and ZK Pivottable 2.0.0
*
*/
@SuppressWarnings("rawtypes")
public class TestComposer extends GenericForwardComposer {
private static final long serialVersionUID = -3507287817331376913L;
private CustomGmaps map;
private Div divMapa;
private double lat = 35;
private double lng = -110;
public void onAfterRealBind$map() {
System.out.println("Hola onCreate!");
Events.echoEvent("onProbar", divMapa, null);
}
public void onProbar$divMapa () {
System.out.println("***********************Hola onAddMarker!");
Gmarker marker = new Gmarker();
lat += 0.001;
lng += 0.001;
marker.setLat(lat);
marker.setLng(lng);
marker.setParent(map);
map.setCenter(lat, lng);
}
}
CustomGmaps.java
package test;
import org.zkoss.gmaps.Gmaps;
import org.zkoss.zk.ui.event.Events;
public class CustomGmaps extends Gmaps {
private static final long serialVersionUID = 4982965989007143005L;
static {
addClientEvent(CustomGmaps.class, "onAfterRealBind", CE_IMPORTANT|CE_NON_DEFERRABLE);
}
public CustomGmaps () {
setWidgetOverride("_initListeners", "function(n) {\n"
+" this.$_initListeners(n);\n"
+" var wgt = this;\n"
+" setTimeout ( function () {\n"
+" wgt.fireX(new zk.Event(wgt, 'onAfterRealBind', {}, {toServer: true}));\n"
+" }, 0);\n"
+" }\n"
);
}
/** Processes an AU request.
*
* <p>Default: in addition to what are handled by {@link Textbox#service},
* it also handles onOpen and onSelect.
* @since 5.0.0
*/
public void service(org.zkoss.zk.au.AuRequest request, boolean everError) {
final String cmd = request.getCommand();
System.out.println(cmd);
if (cmd.equals("onAfterRealBind")) {
Events.postEvent("onAfterRealBind", this, null);
} else
super.service(request, everError);
}
}
Reference
Regarding to add marker with echo event, the code below works well for me,
zul:
<zk>
<div apply="test.TestComposer">
<gmaps id="map" width="500px" height="500px" lat="35" lng="-110" />
<button id="btn" label="add marker" />
</div>
</zk>
composer
package test;
import org.zkoss.gmaps.Gmaps;
import org.zkoss.gmaps.Gmarker;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
/**
* Tested with ZK 6.0.2 and ZK Pivottable 2.0.0
*
*/
public class TestComposer extends GenericForwardComposer {
private Gmaps map;
private double lat = 35;
private double lng = -110;
public void onClick$btn () {
Events.echoEvent("onAddMarker", map, null);
}
public void onAddMarker$map () {
Gmarker marker = new Gmarker();
lat += 0.001;
lng += 0.001;
marker.setLat(lat);
marker.setLng(lng);
marker.setParent(map);
}
}
Regards, Ben
Yes it works...don't know why it is giving me that error. I will try to investigate a little more. BTW, do you know anything about this: http://forum.zkoss.org/question/85416/how-can-i-hide-a-gmarker-in-gmaps/ (hiding gmarkers)
Neus ( 2013-03-11 07:56:19 +0800 )editAsked: 2013-02-12 11:41:01 +0800
Seen: 81 times
Last updated: May 09 '13