drag from external panel bar to google maps

5 posts, 1 answers
  1. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 20 Jan 2014 Link to this post

    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
  2. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 21 Jan 2014 Link to this post

    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)
     
    }
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 22 Jan 2014 Link to this post

    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!
  5. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 22 Jan 2014 Link to this post

    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
  6. Answer
    David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 22 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready