This is a migrated thread and some comments may be shown as answers.

drag from external panel bar to google maps

4 Answers 32 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
David Ocasio
Top achievements
Rank 2
Veteran
David Ocasio asked on 20 Jan 2014, 02:38 PM
I am looking to drag a panelbar item and drop it  on a google map. a marker would then be created at that position.

See screenshot

I have the drag working fine but I need the pageX, and pageY coordinates where the item is dropped .

Currently I just create a marker at the center of the page after the drop.

Any info would be appreciated.

thanks
dco

4 Answers, 1 is accepted

Sort by
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 21 Jan 2014, 03:28 PM
Well I found a answer.

The event parameter has an x and y property.

I take the client position form the respective x or y property
and subtract  the map-canvas position(position of the map in the document) 

My only issue now is how to find where I am gripping the icon and adjust for that.

Is this the only way to do it ???  Is it the best way to do it ???

thanks
dco
function AddMarker(MapNode)
{
    if (MapNode.marker != null) return
 
 
    MapNode_MarkerSetup(MapNode)
 
    var LatLng = new google.maps.LatLng(MapNode.lattitude, MapNode.longitude);
 
    var marker = new MarkerWithLabel({
        position: LatLng,
        draggable: true,
        map: map,
 
        icon: MapNode.icon,
        labelContent: MapNode.labelcontent,
 
        labelAnchor: new google.maps.Point(-10, 30),
        labelClass: "labels", // the CSS class for the label
        labelStyle: { opacity: 1.00 }
    });
 
    MapNode.marker = marker
}

function draggableOnDragEnd(e) {
 
    idparts=e.sender.hint[0].id.split("_")
    mapnode = findMapNode(parseInt(idparts[1]))
 
    if (mapnode==null) return
    if (mapnode.marker != null) return
 
    latlng = map.getCenter()
 
    mapcanvasX = $("#map-canvas").offset().left
    mapcanvasY = $("#map-canvas").offset().top
 
    newX = e.x.client - mapcanvasX
    newY = e.y.client - mapcanvasY
 
    var point = new google.maps.Point(newX, newY);
    var ll = overlay.getProjection().fromContainerPixelToLatLng(point);
 
    mapnode.lattitude = ll.lat()
    mapnode.longitude = ll.lng()
 
    AddMarker(mapnode)
 
}
0
Kiril Nikolov
Telerik team
answered on 22 Jan 2014, 11:46 AM
Hi David,

I am not exactly sure how your question is related to our product. You are asking how to add a marker on a google maps, which is beyond the scope of Kendo UI.

If this is not the case, please accept my apologies and try to elaborate a bit more.

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 22 Jan 2014, 12:08 PM
Actually I was asking about how to determine the ending x,y position using your drag ...
the google maps part is not your concern but is necessary to give you a big picture of what I am trying to accomplish. I am not asking you how to drop a marker on google maps (lol).

Never the less . I was able through the debugger to find the x and y parameter/method which fits my needs. 

my final question then would be the fitness of using the x,y position from the passed event parameter passed at the end of a drag. Is there something better or is that the best practice.

thanks
dco
0
Accepted
Kiril Nikolov
Telerik team
answered on 22 Jan 2014, 12:26 PM
Hello David,

Thank you very much the detailed information.

The best way to do it is to use the event arguemtnt that holds information about offsetX/Y and clientX/Y

http://jsbin.com/ONiyovoh/2/edit

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drag and Drop
Asked by
David Ocasio
Top achievements
Rank 2
Veteran
Answers by
David Ocasio
Top achievements
Rank 2
Veteran
Kiril Nikolov
Telerik team
Share this question
or