none
Bing Maps Web Control Don't Load (is not a function). RRS feed

  • Question

  • Good morning

    I'm having problems with the Bing Map Web Control V8.

    We currently have several applications that use version 7 of the control and we are migrating to version 8 both in a synchronous way.

    the problem is following,

    In internet explorer (IE11) it works sometimes, but in google chrome (57) it does not work at all.
    Throws the following error

    "xxx is not a function"

    I currently use the branch in release because in experimental it never works.

    Try changing the $(document).ready  by <body OnLoad=xxx>

    But it does not work either.

    I found that in the documentation and in the tutorials always handle the map asynchronously, should I make the change in my applications or not?


    Can you help me?

    Wednesday, March 22, 2017 7:39 PM

Answers

  • I suspect that your application is trying to access the Microsoft.Maps namespace before it is available. The V8 map control is asynchronous and doesn't block the UI thread when loading like V7. As such it is much more likely that your code will be loaded before the map API. I recommend using the callback parameter of the map script URL to call a function the function you use to load the map. All the code samples do this. Here is an example:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: YourBingMapsKey,
                center: new Microsoft.Maps.Location(51.50632, -0.12714),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 10
            });
    
            //Add your post map load code here.
        }
        </script>
        
        <!-- Reference to the Bing Maps SDK -->
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript' src='/BingMapsCredentials.js'></script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, March 23, 2017 2:00 AM