Databases
StackOverflow2013
Postsdbo
POCreate draggable markers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate draggable markers
    text
    copied!<p>I have seen in PrimeFaces demo an example on Adding markers and on Draggable markers. However I need to integrate both these things into one working examples and was not sucessful so far.</p> <p>Here is what I have so far (relevant part of the codes)</p> <p>addevent.xhtml </p> <pre><code>&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(); dlg.show(); console.log("HandlePoint Click do we have anything?"+event.latLng.lat()); } return true; } function markerAddComplete() { currentMarker = new google.maps.Marker({ position:new google.maps.LatLng(document.getElementById('lat').value, document.getElementById('lng').value) }); var title = document.getElementById('title'); var type = document.getElementById('location'); var typeOut; console.log("type:"+type); console.log("type value:"+type.value); console.log("type value to string"+type.value.toString()); if (type.value.toString() == "START") { typeOut = "Start"; currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/green-dot.png"); } else if (type.value.toString() == "END") { typeOut = "End"; currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/red-dot.png"); } else { typeOut = "Checkpoint"; currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"); } currentMarker.setTitle("Description: "+title.value+"\nType: "+typeOut); title.value = ""; type.value = ""; typeOut = ""; map.addOverlay(currentMarker); // currentMarker.setDraggable(true); currentMarker = null; dlg.hide(); } function cancel() { dlg.hide(); currentMarker.setMap(null); currentMarker = null; return false; } &lt;/script&gt; </code></pre> <p></p> <p> ... </p> <pre><code> &lt;p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" /&gt; &lt;p:gmapInfoWindow&gt; &lt;p:outputPanel style="text-align:center;display:block;margin:auto:"&gt; &lt;h:outputText value="Title: #{mapBean.currentMarker.title}"/&gt;&lt;br/&gt; &lt;p:commandButton value="Delete" action="#{mapBean.deleteCurrentMarker}" partialSubmit="true" process="gmap" update="gmap" /&gt; &lt;/p:outputPanel&gt; &lt;/p:gmapInfoWindow&gt; &lt;!-- ignore --&gt; &lt;ui:remove&gt; &lt;p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" /&gt; &lt;/ui:remove&gt; &lt;/p:gmap&gt; </code></pre> <p></p> <pre><code>&lt;p:dialog widgetVar="dlg" modal="true" effect="FADE" showEffect="explode" effectDuration="0.5" close="false"&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="#{mapBean.title}" /&gt; &lt;h:outputLabel for="title" value="Location type" /&gt; &lt;h:selectOneMenu id="location" value="#{mapBean.location}" required="true"&gt; &lt;f:selectItem itemLabel="Select One" itemValue="" /&gt; &lt;f:selectItems value="#{mapBean.locations}" /&gt; &lt;/h:selectOneMenu&gt; &lt;f:facet name="footer"&gt; &lt;p:commandButton value="Add" actionListener="#{mapBean.addMarker}" oncomplete="markerAddComplete()"/&gt; &lt;p:button value="Cancel" onclick="return cancel()"/&gt; &lt;/f:facet&gt; &lt;/h:panelGrid&gt; &lt;h:inputHidden id="lat" value="#{mapBean.lat}" /&gt; &lt;h:inputHidden id="lng" value="#{mapBean.lng}" /&gt; &lt;/h:form&gt; &lt;/p:dialog&gt; </code></pre> <p>Backing Bean MapBean.java</p> <pre><code>public void addMarker(ActionEvent actionEvent) { logger.info("MapBean add marker event ?"); LatLng coord = new LatLng(lat,lng); String iconUrl; if (this.location == LocationType.START) { logger.info("green icon"); iconUrl = "http://maps.google.com/mapfiles/ms/micons/green-dot.png"; } else if (this.location == LocationType.END) { logger.info("red icon"); iconUrl = "http://maps.google.com/mapfiles/ms/micons/red-dot.png"; } else { logger.info("yellow icon"); iconUrl = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; } Marker marker = new Marker(coord, "Description: "+this.getTitle()+"\n Type:"+this.location.toString(),this.location,iconUrl); // marker.setDraggable(true); // this was of course un-commented previously //logger.info("is draggable:"+marker.isDraggable()); mapModel.addOverlay(marker); //marker.setDraggable(true); addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng)); } public void onMarkerDrag(MarkerDragEvent event) { logger.info("DRAGGING !!!"); Marker marker = event.getMarker(); logger.info("Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()); } </code></pre> <p>So the issue is that I can make my markers draggable - but only at the client side, the onMarkerDrag method is never called.</p> <p>We have observed when this attribute is set onPointClick="handlePointClick(event);" this listener does not work </p> <p>If I remove onPointClick it works.</p> <p>But for now I have to choose - I want to either have my markers draggable or I want to have a possibility to add them. I would obviously want to have both things.. </p> <p>Any ideas what might be the issue ?</p> <p>I have found this topic on stackoverflow, couldnt really figured the solution out. <a href="https://stackoverflow.com/questions/14736705/how-to-create-a-draggable-marker">How to create a draggable marker?</a></p> <p>I am using JBoss AS 7.1.1 PrimeFaces 3.5 JSF 2.1 (provided by JBoss)</p> <p>Cheers, OSiRiS</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload