none
HTML pin only draggable in IE

    Question

  • pin = new Microsoft.Maps.Pushpin(loc, {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">'+pinname+'<span>'}); 

    I've created a draggable HTML pin, which works perfectly in IE, but not in Firefox or Chrome. If I swap the HTML for an icon it works in all browsers. I am using multiple entity collections.

    Is there a way to make this work in all supported browsers?

    Versions are IE 10, Firefox 28, Chrome 33.

    • Edited by Kaiser Pete Thursday, March 27, 2014 4:42 PM
    Thursday, March 27, 2014 3:40 PM

Answers

  • Thursday, March 27, 2014 5:01 PM
    Owner
  • Actually, testing your code I found it works in every browser I tested, including Chrome 33, IE 10/11, and Firefox 28

    Go to this link: http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins3

    Update the code with the following and press Run:

    map.entities.clear(); 
    var pushpinOptions =  {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">HEllo<span>'}
    
    var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
    map.entities.push(pushpin); 
    You should see the word Hello on the map. Clicking and drag it around should work fine.

    http://rbrundritt.wordpress.com

    Friday, March 28, 2014 2:09 PM
    Owner
  • Right, and that's what the workaround I created fixes in this blog post: http://rbrundritt.wordpress.com/2014/03/07/fix-ie11-mouse-events-in-bing-maps-v7/

    Using this simple workaround corrects the issue in IE11, Firefox28 and Chrome 33. Here is a simple code sample to try:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		newLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(newLayer);
    		var pushpinOptions =  {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">HELLO<span>'}
    
    		var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
    		newLayer.push(pushpin); 
    	}
      </script>
    	<style>
    	.MicrosoftMapDrawing, .MapPushpinBase{
    		pointer-events: auto !important;
    	}
    	</style>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div>
    </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Saturday, March 29, 2014 5:08 PM
    Owner

All replies

  • Thursday, March 27, 2014 5:01 PM
    Owner
  • Thanks for the suggestion Ricky. Unfortunately it hasn't helped.
    Thursday, March 27, 2014 8:26 PM
  • Actually, testing your code I found it works in every browser I tested, including Chrome 33, IE 10/11, and Firefox 28

    Go to this link: http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins3

    Update the code with the following and press Run:

    map.entities.clear(); 
    var pushpinOptions =  {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">HEllo<span>'}
    
    var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
    map.entities.push(pushpin); 
    You should see the word Hello on the map. Clicking and drag it around should work fine.

    http://rbrundritt.wordpress.com

    Friday, March 28, 2014 2:09 PM
    Owner
  • As soon as I add a separate layer it no longer works.

    I'm doing something like this:

    newLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(newLayer);
    var pushpinOptions =  {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">HELLO<span>'}
    
    var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
    newLayer.push(pushpin); 
    

    Saturday, March 29, 2014 9:25 AM
  • Right, and that's what the workaround I created fixes in this blog post: http://rbrundritt.wordpress.com/2014/03/07/fix-ie11-mouse-events-in-bing-maps-v7/

    Using this simple workaround corrects the issue in IE11, Firefox28 and Chrome 33. Here is a simple code sample to try:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		newLayer = new Microsoft.Maps.EntityCollection();
    		map.entities.push(newLayer);
    		var pushpinOptions =  {draggable: true, width: 500, height: null, anchor:new Microsoft.Maps.Point(-18, 8), htmlContent: '<span class="cnpin">HELLO<span>'}
    
    		var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
    		newLayer.push(pushpin); 
    	}
      </script>
    	<style>
    	.MicrosoftMapDrawing, .MapPushpinBase{
    		pointer-events: auto !important;
    	}
    	</style>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div>
    </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Saturday, March 29, 2014 5:08 PM
    Owner
  • Thanks for the code sample. It works exactly as you say, but I can't get it to work in my code. In fact the hover event on other pins stops working when I add the styling from the sample.

    I'll keep working on it and will update when I get somewhere hopefully.

    Tuesday, April 01, 2014 11:08 PM
  • Just to be sure, you aren't using the Bing Theme module are you?

    http://rbrundritt.wordpress.com

    Wednesday, April 02, 2014 8:57 AM
    Owner