Bing Maps AJAX control 7.0: Draggable Pushpins


/ Published in: HTML
Save to your folder(s)

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

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


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de" type="text/javascript" charset="UTF-8"></script>
  5. </head>
  6. <body onload="init();">
  7.  
  8.  
  9. <div id="myMap" style="position: relative; width: 800px; height: 300px;"></div>
  10.  
  11.  
  12. <script type="text/javascript">
  13. // Event handlers
  14. function onStartDragPin(e){
  15. console.log('dragstart');
  16. }
  17. function onDragPin(e){
  18. console.log('drag: ' + e.entity.getLocation());
  19. }
  20. function onEndDragPin(e){
  21. console.log('dragend');
  22. }
  23.  
  24. function init(){
  25. // Load the map
  26. var map = new Microsoft.Maps.Map(
  27. document.getElementById("myMap"),
  28. {
  29. credentials: "YOUR-BING-KEY",
  30. mapTypeId: Microsoft.Maps.MapTypeId.road
  31. }
  32. );
  33.  
  34. // Create a draggable Pushpin
  35. var pin = new Microsoft.Maps.Pushpin(
  36. map.getCenter(),
  37. {
  38. draggable: true
  39. }
  40. );
  41.  
  42. // Listen to its drag-related events
  43. Microsoft.Maps.Events.addHandler(pin, 'dragstart', onStartDragPin);
  44. Microsoft.Maps.Events.addHandler(pin, 'drag', onDragPin);
  45. Microsoft.Maps.Events.addHandler(pin, 'dragend', onEndDragPin);
  46.  
  47. // And add the pin to the map
  48. map.entities.push(pin);
  49. }
  50.  
  51.  
  52.  
  53. </body>
  54. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.