none
Using v8 maps on mobile RRS feed

  • Question

  • I'm using the v8 API to load up maps on my web app. Everything is working as expected on desktop and tablet browsers, but it just shows a blank space on mobile. No errors getting thrown in the console, and all script calls succeeded. Tried mobile chrome and safari, and neither seem to be working. Any ideas?
    • Edited by turtleguyy Tuesday, October 18, 2016 2:42 PM
    Monday, October 17, 2016 10:42 PM

Answers

  • It sounds like the map is loading, but the map div has collapsed. Possibly has a width/height of 0px. A couple things to try.

    1. Try the Bing Maps V8 interactive SDK on your mobile device just to verify the Bing Maps V8 will work. It more than likely will, but a nice quick test that lets you know that it will work: https://aka.ms/bingmapsv8isdk
    2. Try hard coding the width/height using a pixel value, if you haven't already done this, just in case the mobile device is ignoring height = 100% which isn't uncommon if you haven't set the body/html height to 100%.
    3. Ensure that a viewport metatag has been set on your page. Recommended: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 



    [Blog] [twitter] [LinkedIn]

    Tuesday, October 18, 2016 5:46 PM

All replies

  • It sounds like the map is loading, but the map div has collapsed. Possibly has a width/height of 0px. A couple things to try.

    1. Try the Bing Maps V8 interactive SDK on your mobile device just to verify the Bing Maps V8 will work. It more than likely will, but a nice quick test that lets you know that it will work: https://aka.ms/bingmapsv8isdk
    2. Try hard coding the width/height using a pixel value, if you haven't already done this, just in case the mobile device is ignoring height = 100% which isn't uncommon if you haven't set the body/html height to 100%.
    3. Ensure that a viewport metatag has been set on your page. Recommended: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 



    [Blog] [twitter] [LinkedIn]

    Tuesday, October 18, 2016 5:46 PM
  • Nope, the div hasn't collapsed or anything like that. The container is visible and is the expected size. If I plug the phone into the computer and inspect it the browser, I can even see the divs that the API injects into the page. They're just empty. Here's a screenshot of those divs, while inspecting the phone's markup.

    What would cause those to not get the map loaded into them?

    Monday, October 24, 2016 8:51 PM
  • There is nothing in those div's. My first though is that a connection issue, as not all the code is being loaded for the map control. Not even the zoom buttons HTML is rendering. My second thought is your mobile app is blocking code that is loading from a 3rd party from loading additional script files. If you are sure it's not a connection issue, then it is most likely the second one. Make sure that your application allows full rights to scripts from bing.com and virtualearth.net (and any sub-domain from these).

    Also, did you try the Bing Maps interactive SDK to see if it has the same issue?


    [Blog] [twitter] [LinkedIn]


    Monday, October 24, 2016 9:17 PM
  • Yeah, I clicked on the link you provided earlier and was able to use the maps there just fine.

    The maps are being loaded into a mobile website, not a native application. I'm currently just using mobile safari to test the issue. The script calls are taking a bit long to resolve, but everything looks to be coming back just fine. (screenshot)

    Monday, October 24, 2016 9:29 PM
  • Very odd. I haven't seen this occur in any other app. Would it be possible to send my your application. My email is richbrun at microsoft.com

    When you say mobile safari, is this on an iOS device? If not, can you try it on an iOS device to see if it works there.


    [Blog] [twitter] [LinkedIn]

    Tuesday, October 25, 2016 5:56 PM