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