A slightly more complex example with a map marker which is both draggable and which has an InfoBubble attached to it which will appear when the marker is clicked.
JavaScript Demo Source: nokia-marker.js
var map; function initialize() { var bubbleContainer = new nokia.maps.map.component.InfoBubbles(); var coords = new nokia.maps.geo.Coordinate(52.530390, 13.385190); var marker = new nokia.maps.map.StandardMarker(coords); var infoBubble; var restore_bubble = false; var bubbleText = "Nokia Maps; Made Here" map = new nokia.maps.map.Display( document.getElementById("map"), { 'zoomLevel': 12, 'center': [52.530390, 13.385190], components: [ new nokia.maps.map.component.Behavior(), bubbleContainer ] }); marker.addListener("click", function() { infoBubble = bubbleContainer.addBubble(bubbleText, coords); restore_bubble = true; }); marker.enableDrag(); map.objects.add(marker); marker.addListener("dragstart", function() { if (bubbleContainer.bubbleExists(infoBubble)) { bubbleContainer.removeBubble(infoBubble); restore_bubble = true; } }); marker.addListener("dragend", function(event) { var xy = event.dataTransfer.getData("application/map-drag-object-offset"); var new_coords = map.pixelToGeo( event.displayX - xy.x + marker.anchor.x, event.displayY - xy.y + marker.anchor.y ); var bb = map.getBoundingBox(); if (bb.contains(new_coords)) { coords = new_coords; } if (restore_bubble) { infoBubble = bubbleContainer.addBubble(bubbleText, coords); restore_bubble = false; } }); }