How to add map marker with Script

[Steve]

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.

Help please.

[Steve]

Got an answer on SO:

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 });
    }

[Patrick | Technical Support Engineer, Senior]

Hi Steve,

Glad you found a solution!  

Regards,
Patrick
Telerik by Progress