locked
Custom Pin click propagation issue in Firefox and Chrome RRS feed

  • Question

  • I have started to use Bing Maps Ajax control in a web application and I needed to cluster the nearby ones.

    I have started with the demo provided by Microsoft ( http://www.bingmapsportal.com/ISDK/AjaxV7#LoadingDynamicModule2 ). All went well until I was forced to use custom pins (application requires complex data in the pin label). After that Firefox and Chrome did not catch any click event (of neither clustered nor simple pins).

    I have created a short code sample to demonstrate the issue ( http://jsfiddle.net/zoltan_a_serialthinker/SsaBX/ ). When clicking the first button (Regular pins) you will see that clicking any pin will show the info window, while the second scenario (clicking the Custom Pin button) will only work in Internet Explorer and Opera.

    I've been pulling out my hair for the three days because of this. I would appreciate any help or hint.

    Thank you.
    Zoltan

    Wednesday, March 13, 2013 9:13 AM

Answers

  • Try this workaround, it was provided by Microsoft when I had a similar problem

    jQuery('#mapDiv').find('.MapPushpinBase').css('pointer-events', 'all');

    This CSS tricks the mouse into receiving the mouse events.

    -=Dan=-

    Tuesday, March 19, 2013 8:30 AM
  • Hi Dan,

    Your suggestion worked out with a small adjustment: instead of 'all' it had to be set to 'auto'. I have updated the sample code to reflect the solution:

    http://jsfiddle.net/SsaBX/18/

    Thank you!

    Wednesday, March 20, 2013 3:04 PM

All replies

  • Try this workaround, it was provided by Microsoft when I had a similar problem

    jQuery('#mapDiv').find('.MapPushpinBase').css('pointer-events', 'all');

    This CSS tricks the mouse into receiving the mouse events.

    -=Dan=-

    Tuesday, March 19, 2013 8:30 AM
  • Hi Dan,

    Your suggestion worked out with a small adjustment: instead of 'all' it had to be set to 'auto'. I have updated the sample code to reflect the solution:

    http://jsfiddle.net/SsaBX/18/

    Thank you!

    Wednesday, March 20, 2013 3:04 PM
  • I was looking at the solution that you mentioned, in my case I have a textbox in the along with the links. Links works as expected but textbox is not clickable (don't get the focus). This is in Chrome and Firefox.

    I was trying the same thing at :

    http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20 (Infobox set html content)

    map.entities.clear();
     var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
     var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );   
     map.entities.push(defaultInfobox);
     defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px;width:240px;"><b id="infoboxTitle" style="; top:10px; left:10px; width:220px;">Driving Directions<br /><input type="text" name="startingAddress"  value="Starting Address"/>  <div>');


    Friday, August 15, 2014 5:11 AM