none
Maps v7: Mouse Click on a polygon and get ID vs v6.3 RRS feed

  • Question

  • In Bing Maps v6.3 I would 

    oVEMap.AttachEvent("onclick", function (e) { var shapeClicked = e.elementID && oVEMap.GetShapeByID(e.elementID);

    if (shapeClicked) {
    var id = shapeClicked.GetID();
    }
    });


    How is this done in Bing Maps v7?

    -=Dan=-

    • Moved by Ricky_Brundritt Friday, March 16, 2012 6:51 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, March 2, 2012 11:32 PM

Answers

  • You do this using this way:

    1 - Extend the object model from Bing Maps AJAX v7 Control:

    Microsoft.Maps.Pushpin.prototype.elementId = null;

    2 - Add the event on the element that you want to add in your map

    			var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
    			pushpin.elementId = 'myid';
    			map.entities.push(pushpin);
    			Microsoft.Maps.Events.addHandler(map, 'click', function(e) { 
    				if(e.targetType == 'pushpin') {
    					alert(e.target.elementId);
    				}
    			});

    Complete working sample:

    <!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" />
    	<title></title>
    	<script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    	</script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		var map = null;
    
    		function getMap() {
    			Microsoft.Maps.Pushpin.prototype.elementId = null;
    		
    			// Initialize the map
    			map = new Microsoft.Maps.Map($('#map').get(0), {
    				credentials: "Your Bing Maps Key",
    				center: new Microsoft.Maps.Location(47.5, 2.75),
    				zoom: 4,
    				mapTypeId: Microsoft.Maps.MapTypeId.road
    			});
    
    			var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
    			pushpin.elementId = 'myid';
    			map.entities.push(pushpin);
    			Microsoft.Maps.Events.addHandler(map, 'click', function(e) { 
    				if(e.targetType == 'pushpin') {
    					alert(e.target.elementId);
    				}
    			});
    			
    		}
    		
    	</script>
    </head>
    <body onload='getMap()'>
    	<div id="map" style="position: relative; width: 800px; height: 600px;">
    	</div>
    </body>
    </html>
    
    Hope this will help.


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Wednesday, March 7, 2012 10:47 AM
    Moderator