StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17399330
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-07-01T07:26:31.373
FavoriteCount
0
LastActivityDate
2013-07-02T04:55:50.043
LastEditDate
2013-07-02T04:55:50.043
LastEditorUserId
1729869
OwnerUserId
1729869
ParentId
17295330
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
Unfortunately I can't tell you exactly what you are doing wrong because I can't make sense of the code you posted (incomplete and badly formatted...sorry). However, after getting familiar with the examples online I think I can tell you why your markers were not being dragged after you added one to the map. I'm also going to provide you my working sample since you've been waiting so long for an answer. When you called <code>map.addOverLay</code> via the javascript, you were indeed setting a marker on the client side and (assuming that your code worked) updating the server side after clicking Add. However, you needed to reload <code>p:gmap</code> with the updated collection of markers that were on the server. When you added the new marker, <code>p:gmap</code> was still referencing the old collection. Therefore, when you tried to move it you couldn't. As far as <code>p:gmap</code> was concerned no <code>MarkerDragEvent</code> was being fired because you were not dragging one of its markers. You were simply touching a static image that was set by <code>map.addOverlay</code>. So to fix this, you need to update <code>p:gmap</code> after clicking Add by adding it in the <code>p:ajax</code> list <pre><code><p:commandButton id="test" value="Add" actionListener="#{mapBean.addMarker}" update=":growl, :gmap" oncomplete="markerAddComplete()"/> </code></pre> That's really it honestly. As far as the answer from the similar problem you found...I can't make sense of it either. Anyway, here is the the code Index.xhtml <pre><code><h:head> <title>Facelet Title</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <h:outputScript name="javascript/common.js" /> </h:head> <h:body> <p:growl id="growl" showDetail="true"/> <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px" model="#{mapBean.draggableModel}" onPointClick="handlePointClick(event);" widgetVar="map"> <p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" update="growl" /> </p:gmap> <p:dialog widgetVar="dlg" showEffect="fade"> <h:form prependId="false"> <h:panelGrid columns="2"> <h:outputLabel for="title" value="Title:" /> <p:inputText id="title" value="#{mapBean.title}" /> <f:facet name="footer"> <p:commandButton id="test" value="Add" actionListener="#{mapBean.addMarker}" update=":growl, :gmap" oncomplete="markerAddComplete()"/> <p:commandButton value="Cancel" onclick="return cancel()"/> </f:facet> </h:panelGrid> <h:inputHidden id="lat" value="#{mapBean.lat}" /> <h:inputHidden id="lng" value="#{mapBean.lng}" /> </h:form> </p:dialog> </h:body> </code></pre> MapBean.java <pre><code>@ManagedBean public class MapBean implements Serializable { private MapModel draggableModel; private String title; private double lat; private double lng; public MapBean() { draggableModel = new DefaultMapModel(); //Shared coordinates LatLng coord1 = new LatLng(36.879466, 30.667648); LatLng coord2 = new LatLng(36.883707, 30.689216); LatLng coord3 = new LatLng(36.879703, 30.706707); LatLng coord4 = new LatLng(36.885233, 30.702323); //Draggable draggableModel.addOverlay(new Marker(coord1, "Konyaalti","Konyaalti","http://maps.google.com/mapfiles/ms/micons/red-dot.png")); draggableModel.addOverlay(new Marker(coord2, "Ataturk Parki", "Ataturk Parki","http://maps.google.com/mapfiles/ms/micons/red-dot.png")); draggableModel.addOverlay(new Marker(coord3, "Karaalioglu Parki", "Karaalioglu Parki","http://maps.google.com/mapfiles/ms/micons/red-dot.png")); draggableModel.addOverlay(new Marker(coord4, "Kaleici", "Kaleici", "http://maps.google.com/mapfiles/ms/micons/red-dot.png")); for(Marker marker : draggableModel.getMarkers()) { marker.setDraggable(true); } } public MapModel getDraggableModel() { return draggableModel; } 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 onMarkerDrag(MarkerDragEvent event) { Marker marker = event.getMarker(); addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng())); } public void addMessage(FacesMessage message) { FacesContext.getCurrentInstance().addMessage(null, message); } public void addMarker(ActionEvent actionEvent) { Marker marker = new Marker(new LatLng(lat, lng), title, "SOME VALUE", "http://maps.google.com/mapfiles/ms/micons/red-dot.png"); marker.setDraggable(true); draggableModel.addOverlay(marker); addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng + "Is marker draggable ?" + marker.isDraggable())); } } </code></pre> common.js This file contains the javascript. I was using Netbeans and this file was located in a folder called javascript in the following directory Web Pages/resources/javascript. No need to mix it with the JSF. Try to be clean, it will help you in the long run. The code is basically <a href="http://www.primefaces.org/showcase/ui/gmapAddMarkers.jsf" rel="nofollow">the same as the example online</a> so you can just copy it from there. The only thing I did was take out the <code><script></code> tags and moved it all in that file. Cheers. 
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCreate draggable markers
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USAndy
UserOwnerUserId
1. USAndy
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.