更新位置后Google地图标记消失

Question

I want to update the google map markers using javascript.

Here are my codes:

Index.xhtml

<h:form id="mapForm">
                    <p:gmap id="map" center="1.30, 103.80" fitBounds="true" zoom="11" type="ROADMAP" style="width:100%;height:100%" model="#{indexBean.mapModel}" mapTypeControl="false" widgetVar="mapWidget">
                    </p:gmap>
                    <script type="text/javascript">
                        //<![CDATA[
                        function handleComplete(xhr, status, args) {
                            var gmap = mapWidget.getMap();
                            for (var i in gmap.markers)
                            {
                                var newMarker = eval("args.marker" + i);
                                var oldMarker = gmap.markers[i];
                                oldMarker.icon = newMarker.icon;
                                oldMarker.title = newMarker.title;
                                oldMarker.position = newMarker.position;
                                oldMarker.setMap(gmap);
                            }
                        }
                        // ]]>
                    </script> 
</h:form>
<p:poll interval="3" listener="#{indexBean.updateMarkers}" oncomplete="handleComplete(xhr, status, args)"></p:poll>

IndexBean.java

public void updateMarkers()
{
    populateMapModelEntities();
    for (int i = 0; i < mapModel.getMarkers().size(); i++)
    {
        LatLng latLng = mapModel.getMarkers().get(i).getLatlng();
        double lat = latLng.getLat();
        lat+=.1;
        mapModel.getMarkers().get(i).setLatlng(new LatLng(lat, latLng.getLng()));

        RequestContext.getCurrentInstance().addCallbackParam("marker" + i, mapModel.getMarkers().get(i));
    }
}

Whenever I'm not updating the postion, the markers remain visible. But if I'm updating the postion, the markers disappear. I need your help.

Answer 1

I don't know why, but the lat long info is missing when the javascript tries to recover it.

This is what I've done

In my managed bean, this is the method to send the new data:

    public void ajaxPoll() {
    ILoadSrvc loadSrvc= new LoadSrvc();
    for(Marker marker:mapLoadModel.getMarkers()){
        Load load = loadSrvc.getLoadByRef(marker.getTitle());
        if(load != null){
            if(load.getLoadStatus().getLastLatitude()!=marker.getLatlng().getLat() ||
                    load.getLoadStatus().getLastLongitude()!= marker.getLatlng().getLng() ||
                    (load.getMaxAlert()!=null && load.getMaxAlert()=='H' && marker.getIcon().equals(Constants.POI_LOAD_OK)) ||
                    (load.getMaxAlert()==null && marker.getIcon().equals(Constants.POI_LOAD_ALERT))){
            marker.setLatlng(new LatLng(load.getLoadStatus().getLastLatitude(),load.getLoadStatus().getLastLongitude()));
            if(load.getMaxAlert()!=null && load.getMaxAlert()=='H'){
                marker.setIcon(Constants.POI_LOAD_ALERT);
            }else{
                marker.setIcon(Constants.POI_LOAD_OK);
            }
            logger.info("cambio coordenades de:"+marker.getTitle());
            }
        }
    }

      for (int i = 0; i < mapLoadModel.getMarkers().size(); i++){

          RequestContext.getCurrentInstance().addCallbackParam("marker" + i, mapLoadModel.getMarkers().get(i));

          RequestContext.getCurrentInstance().addCallbackParam("position" + i, mapLoadModel.getMarkers().get(i).getLatlng());
      }
      logger.info("refresco marcadores");
   }

This is part of the XHTML

<ui:define name="scripts">
        <script src="https://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
        <script>
 //<![CDATA[
 function handleComplete(xhr, status, args){
var gmap = PF('gMapWV').getMap();
for(var i in gmap.markers)
{
  var newMarker = eval("args.marker"+i);
  var newPosition = eval("args.position"+i);
  var oldMarker = gmap.markers[i];
  oldMarker.setPosition(newPosition);
  oldMarker.icon=newMarker.icon;
  oldMarker.setMap(gmap);
 }   
 }
// ]]>
</script>
 </ui:define>

......

            <p:poll interval="#{manageLoadExecution.refreshInterval}" listener="#{manageLoadExecution.ajaxPoll}" oncomplete="handleComplete(xhr, status, args)" />
            <p:gmap widgetVar="gMapWV" id="gMapWV" center="#{manageLoadExecution.latitude} , #{manageLoadExecution.longitude}"  zoom="#{manageLoadExecution.zoomLevel}" fitBounds="false" type="ROADMAP"  style="width:900px;height:400px" model="#{manageLoadExecution.mapLoadModel}" >