drag from external panel bar to google maps

[David Ocasio]

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

[David Ocasio]

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)

}

[Kiril Nikolov]

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

[David Ocasio]

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

[Kiril Nikolov]

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