title: Primefaces GMap addMarker (JavaScript) + selectMarker (overlaySelectEvent)
body: <p>I have been struggling to combine both the GMap AddMarker and Selection examples from the Primefaces Showcase.</p>
  
  <p>What I try to achieve here is to get the overlaySelectEvent fired when clicking on a marker that has been added to the map using JavaScript, having also those markers in the map model, correctly in sync.</p>
  
  <p>JSF and JavaScript:</p>
  
  <pre><code>&lt;p:growl id="messages" showDetail="true" /&gt;
  
  &lt;p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
      model="#{mapBackingBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" /&gt;
  
  &lt;p:ajax event="overlaySelect" listener="#{mapBackingBean.onMarkerSelect}" update="growl" /&gt;
  
  &lt;p:dialog widgetVar="dlg" showEffect="fade"&gt;
      &lt;h:form prependId="false"&gt;
          &lt;h:panelGrid columns="2"&gt;
              &lt;h:outputLabel for="title" value="Title:" /&gt;
              &lt;p:inputText id="title" value="#{mapBackingBean.title}" /&gt;
  
              &lt;f:facet name="footer"&gt;
                  &lt;p:commandButton value="Add" actionListener="#{mapBackingBean.addMarker}" update=":messages" oncomplete="markerAddComplete()" /&gt;
                  &lt;p:commandButton value="Cancel" onclick="return cancel()" /&gt;
              &lt;/f:facet&gt;
          &lt;/h:panelGrid&gt;
  
          &lt;h:inputHidden id="lat" value="#{mapBackingBean.lat}" /&gt;
          &lt;h:inputHidden id="lng" value="#{mapBackingBean.lng}" /&gt;
      &lt;/h:form&gt;
  &lt;/p:dialog&gt;
  
  &lt;script type="text/javascript"&gt;
      var currentMarker = null;
  
      function handlePointClick(event) {
          if(currentMarker === null) {
              document.getElementById('lat').value = event.latLng.lat();
              document.getElementById('lng').value = event.latLng.lng();
  
              currentMarker = new google.maps.Marker({
                  position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
              });
  
              PF('map').addOverlay(currentMarker);
  
              PF('dlg').show();
          }   
      }
  
      function markerAddComplete() {
          var title = document.getElementById('title');
          currentMarker.setTitle(title.value);
          title.value = "";
  
          currentMarker = null;
          PF('dlg').hide();
      }
  
      function cancel() {
          PF('dlg').hide();
          currentMarker.setMap(null);
          currentMarker = null;
  
          return false;
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Backing bean:</p>
  
  <pre><code>@ManagedBean
  @ViewScoped
  public class MapBackingBean implements Serializable {
  
    private MapModel emptyModel;
  
    private Marker marker;
  
      private String title;
  
      private double lat;
  
      private double lng;
  
      @PostConstruct
      public void init() {
          emptyModel = new DefaultMapModel();
      }
  
      public MapModel getEmptyModel() {
          return emptyModel;
      }
  
      public String getTitle() {
          return title;
      }
  
      public void setTitle(String title) {
          this.title = title;
      }
  
      public double getLat() {
          return lat;
      }
  
      public void setLat(double lat) {
          this.lat = lat;
      }
  
      public double getLng() {
          return lng;
      }
  
      public void setLng(double lng) {
          this.lng = lng;
      }
  
      public void addMarker() {
          Marker marker = new Marker(new LatLng(lat, lng), title);
          emptyModel.addOverlay(marker);
  
          FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
      }
  
      public void onMarkerSelect(OverlaySelectEvent event) {
          marker = (Marker) event.getOverlay();
  
          FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Selected", marker.getTitle()));
      }
  
      public Marker getMarker() {
          return marker;
      }
  }
  </code></pre>
  
  <p>So the question is: is there a way to trigger the ajax overlaySelectEvent when clicking on these markers added using JavaScript? Notice I do not want to 'update' the  component, because it flashes when refreshing and I need it to be fast because this map will get some of its makers updated several times a minute.</p>
  
  <p>I would appreciate any help. Thanks.</p>