Kendo UI Map - How to add marker with javascript

Question

I have a map that a user will utilize in order to mark their position. I use geolocation and Bing layer to give them a good start. I want them to click on the map, have it recenter to the point they click, remove the existing marker, then create a new one where the map is centered.

function onClick(e) { var resultArray = e.location.toString().split(',');

        $('#map').data("kendoMap").center([parseFloat(resultArray[0]), parseFloat(resultArray[1])]);
        $('#map').data("kendoMap").markers.clear();
        $('#map').data("kendoMap").markers.add([parseFloat(resultArray[0]), parseFloat(resultArray[1])]);
    }

The function above centers the map, removes the previous marker, and does not give an error on the ADD. However, the new marker doesn't show up.

Any help would be appreciated.

** Thanks for pointing me in the right direction. I am creating my map as a result of the geolocation. It is working now with this.

function createMap(Lat, Long) {
        $("#map").kendoMap({
            center: [Lat, Long],
            zoom: 17,
            layers: [{
                type: "bing",
                imagerySet: "aerialWithLabels",
                key: "###MYKEY###"
            }],
            markers: [{
                location: [Lat, Long],
                shape: "pinTarget",
                tooltip: {
                    content: "You are Here!!"
                }
            }],
            click: onClick,
            panEnd: onPanEnd
        });
    }

function onClick(e) {
        var map = $("#map").data("kendoMap");
        var loc = map.eventToLocation(e);

        map.center(loc);
        map.markers.clear();
        map.markers.add({ location: loc });
    }

Answer 1

You should define:

var map = $("#map").data("kendoMap"); 

outise the on click event

and then use map variable

map.center(loc);
map.markers.clear();
map.markers.add({location: loc});

http://dojo.telerik.com/AMoHA