Advanced Search

Return to Snippet

Revision: 36890
at November 29, 2010 21:13 by wildpeaks
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init();">


<div id="myMap" style="position: relative; width: 800px; height: 300px;"></div>


<script type="text/javascript">
// Event handlers
function onStartDragPin(e){
	console.log('dragstart');
}
function onDragPin(e){
	console.log('drag: ' + e.entity.getLocation());
}
function onEndDragPin(e){
	console.log('dragend');
}

function init(){
	// Load the map
	var map = new Microsoft.Maps.Map(
		document.getElementById("myMap"),
		{
			credentials: "YOUR-BING-KEY",
			mapTypeId: Microsoft.Maps.MapTypeId.road
		}
	);
	
	// Create a draggable Pushpin
	var pin = new Microsoft.Maps.Pushpin(
		map.getCenter(),
		{
			draggable: true
		}
	);
	
	// Listen to its drag-related events
	Microsoft.Maps.Events.addHandler(pin, 'dragstart', onStartDragPin);
	Microsoft.Maps.Events.addHandler(pin, 'drag', onDragPin);
	Microsoft.Maps.Events.addHandler(pin, 'dragend', onEndDragPin);

	// And add the pin to the map
	map.entities.push(pin);
}
</script>


	
</body>
</html>
Initial URL 









Initial Description





**Important: this snipplet has moved to Github.**

 - [Draggable Pushpins in Bing Maps AJAX 7.0](https://gist.github.com/1973138)









Initial Title





Bing Maps AJAX control 7.0: Draggable Pushpins









Initial Tags














Initial Language





HTML