none
bing maps AJAX controls placement messed up on ios7?

    Question

  • I am having a wierd problem with Bing Maps viewed in Mobile Safari once I've upgraded my devices to ios7 (I am using the AJAX 7.0 sdk in a pretty standard way in a web page). It seems like Bing Maps has slid over the map to the right by about 40% leaving a blurry area on the left. The positioning of the map contents themselves seem slid over --- i.e. instead of seeing Bellevue WA, it shows Seattle over to the west. However, pins as well as the blue geoloc marker are in the correct screen position.

    This does not repro on ios6 or on desktop browsers. To see the repro, please go to http://retail.1track.com , give it a few seconds to get past the loading dialog, and click on the Map tab at the bottom. I've tried various techniques to change how I'm initializing the map and setting various CSS options, but at this point I'm out of ideas....

    Thx

    -praveen 

    Thursday, October 31, 2013 5:30 AM

Answers

  • PROBLEM SOLVED!! The culprit was a css setting text-align:center on an enclosing div many levels up. As a result of this, one of the bing maps divs which has a -webkit-transform: translate3d(-<left>px,-<top>px, 0) was screwing up. Removing the text-align fixed the problem.

    It is bizarre that this happens only on ios7, but a useful tip to know in case anyone else runs into this problem.

    Friday, November 01, 2013 8:27 PM
  • I've managed to find someone with an iOS 7 device to do some testing for me. They ended up finding that the Bing Maps control works find on iOS 7 and it looks like the issue you are seeing is limited to your app. If you try the Bing Maps interactive SDK (http://www.bingmapsportal.com/ISDK/AjaxV7) or the Bing Maps consumer site (http://bing.com/maps) you will find they work fine.

    Taking a look at your code I don't see anything that sticks out. Generally the type of issue you are seeing is usually related to one of three things:

    1. Incorrect doctype (http://msdn.microsoft.com/en-us/library/gg427624.aspx)
    2. Missing UTF-8 metatag
    3. Missing map styles, position and/or width & height.

    You app appears to have an incorrect doctype. Also, try a position of relative rather than absolute.


    http://rbrundritt.wordpress.com

    Thursday, October 31, 2013 4:50 PM

All replies

  • I've managed to find someone with an iOS 7 device to do some testing for me. They ended up finding that the Bing Maps control works find on iOS 7 and it looks like the issue you are seeing is limited to your app. If you try the Bing Maps interactive SDK (http://www.bingmapsportal.com/ISDK/AjaxV7) or the Bing Maps consumer site (http://bing.com/maps) you will find they work fine.

    Taking a look at your code I don't see anything that sticks out. Generally the type of issue you are seeing is usually related to one of three things:

    1. Incorrect doctype (http://msdn.microsoft.com/en-us/library/gg427624.aspx)
    2. Missing UTF-8 metatag
    3. Missing map styles, position and/or width & height.

    You app appears to have an incorrect doctype. Also, try a position of relative rather than absolute.


    http://rbrundritt.wordpress.com

    Thursday, October 31, 2013 4:50 PM
  • Thanks Ricky. I just tried both changes (added the doctype and also set a relative position). It hasn't made a difference. I'm continuing to look into it. Would welcome any further suggestions.

    I went to the ISDK/AjaxV7 site and tried it on ios7 and ios6. In a few minutes, I have found two errors on ios7 that don't seem to repro on ios6. Don't know if this is related to my problem or not, but it doesn't look identical.

    Bug 1: choose "Create map with map options" and tilebuffer ---- slide the map back and forth a few times fast. The map disappears from its pane on ios7 or becomes unresponsive. I see the error message 'undefined is not an object (evaluating this.hideWhileAnimating)

    Bug 2: choose "create map with height width" and do the same thing. After some swiping back and forth, it gets to a similar state, but no error alert message this time.


    Friday, November 01, 2013 5:53 AM
  • PROBLEM SOLVED!! The culprit was a css setting text-align:center on an enclosing div many levels up. As a result of this, one of the bing maps divs which has a -webkit-transform: translate3d(-<left>px,-<top>px, 0) was screwing up. Removing the text-align fixed the problem.

    It is bizarre that this happens only on ios7, but a useful tip to know in case anyone else runs into this problem.

    Friday, November 01, 2013 8:27 PM