none
Bing Maps v7.0 not working as normal in IE8 RRS feed

  • Question

  • Our pages have the ability to draw a selection box on a map and populate the area with data from our databases. Since around May 10th, 2012 or so, that ability stopped working in IE8, with no changes in our code whatsoever. Has Bing Maps made any changes recently that would affect IE8? This problem does not occur in IE9, Chrome or Firefox. Turning on Compatibility mode does not make any difference. Any suggestions would be appreciated! Thanks in advance!
    Tuesday, May 15, 2012 8:55 PM

Answers

All replies

  • There has been no changes to the frontend Bing Maps API recently that would of caused any issues. Are you seeing any error messages? Can you provide a link to your application so we can test?

    http://rbrundritt.wordpress.com

    Wednesday, May 16, 2012 12:02 PM
  • Thank you for replying so fast! I really appreciate it... Unfortunately, the page where the map control is requires a login. I will try to mock up a mini version of the page that just demonstrates the issue and put it in a public area. As far as any errors go, there are none. The problem occurs when a user clicks the left mouse button to drag and draw a rectangle, the drawing stops after a few pixels and draws a tiny quare. I've been at least able to determine that the mouseup event fires as soon as they start gragging, which is not expected! I've put in a meta tag "metahttp-equiv="X-UA-Compatiblex" content="IE=EmulateIE7"to try and have run as IE7, but it makes not difference. I'd be more than happy to include the script code here, but it's a bit long for a forum posting...
    Wednesday, May 16, 2012 12:26 PM
  • Here's the code that works in IE9, Chrome, Firefox, but NOT in IE8 (note: the X-UA-Compatible value can be 9 or 7 and it still doesn't work). Also, I ran it as default.aspx

    Thank you again!

    html> <head> <title>Test Map Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script type="text/javascript"> var map; var isSelecting = false; var startLatLon = 0; var endLatLon = 0; var selectBox; function getMap() { map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "REMOVED", center: new Microsoft.Maps.Location(47.53, -122.30), mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 9, showMapTypeSelector: false }); // Attach the event handlers to the mouse Microsoft.Maps.Events.addHandler(map, 'mousedown', MouseDownHandler); Microsoft.Maps.Events.addHandler(map, 'mousemove', MouseMoveHandler); Microsoft.Maps.Events.addHandler(map, 'mouseup', MouseUpHandler); } function MouseDownHandler(e) { switch (e.targetType) { case "map": isSelecting = true; startLatLon = e.target.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY())); return true; case "pushpin": isSelecting = true; startLatLon = e.target.getLocation(); return true; default: return false; } } function MouseMoveHandler(e) { var rootOfMap = map.getRootElement(); rootOfMap.style.cursor = "crosshair"; if (isSelecting) { if (e.targetType == 'map') { if (selectBox) e.target.entities.remove(selectBox) endLatLon = e.target.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY())); var corners = new Array( startLatLon, new Microsoft.Maps.Location(startLatLon.latitude, endLatLon.longitude), endLatLon, new Microsoft.Maps.Location(endLatLon.latitude, startLatLon.longitude), startLatLon ); selectBox = new Microsoft.Maps.Polyline( corners, { fillColor: new Microsoft.Maps.Color(0, 0, 0, 0), strokeColor: Microsoft.Maps.Color.fromHex("#0000CD"), strokeThickness: 2, strokeDashArray: "4 2" } ); if (selectBox) e.target.entities.push(selectBox); } e.handled = true; } } function MouseUpHandler(e) { if (isSelecting) alert("Mouse up!"); isSelecting = false; selectBox = null; } </script> </head> <body onload="getMap();"> <div id='mapDiv' class="mapDivContainer"></div> </body> </html>


    Wednesday, May 16, 2012 8:11 PM
  • I haven't got IE8 to test, I'm afraid, but looking at the line:

    e.target.entities.remove(selectBox)

    You're missing a terminating semicolon.


    twitter: @alastaira blog: http://alastaira.wordpress.com/

    Wednesday, May 16, 2012 9:29 PM
    Moderator
  • Using your code I was able to reproduce your issue in both IE8 and IE9. The fix is very simple. You are missing the proper required Doctype:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Adding this made your code work for me.

    Also, you are reinventing the wheel. There is already a module that gives you drawing capabilities on Bing Maps v7. You can find it here: http://bingmapsv7modules.codeplex.com/wikipage?title=Shape%20Toolbox%20Module


    http://rbrundritt.wordpress.com

    Thursday, May 17, 2012 7:45 AM
  • I put in the doctype line (which was always there, I just neglected to grab it when I copied the code and pasted it in here) and added the semicolon mentioned above and it still does not work! :( The mouseup event always fires as soon as I start moving the mouse.

    I tried this on 5 different PCs including 2 laptops at home, all IE8 and no luck! I checked 3 of them and they were all on IE 8, version 8.0.6001.18702 and all running Windows XP Pro sp3 (except one was sp2)... sigh...

    Thursday, May 17, 2012 12:47 PM
  • Add e.handled = true; to your mouse down handler. Otherwise the map will move slightly thus making it appear your mouse is up on the clicked point and result in your shape not drawing.

    http://rbrundritt.wordpress.com

    Thursday, May 17, 2012 1:43 PM
  • Now we're getting close! Most of the time, I get the little black circle with a line through it when I start to drag, which forces me to let go of the button. The drawing of the rectangle continues while I'm not pressing any buttons and ends when I click the mouse button, which causes the mouseup event to fire twice.

    Again, thx for the help!!

    Thursday, May 17, 2012 2:27 PM
  • The solution, thanks to Microsoft Bing technical support, was to disable map panning while drawing the selection. That was done by adding "map.setView({ disablePanning:true});" to the mousemove handler while in a selection mode and turning it back on when not in selection mode.
    Tuesday, May 22, 2012 1:58 PM