none
Migrating from Bing v7 to V8 RRS feed

  • Question

  • Hey Guys,

    I was migrating from bing v7 to v8 and my maps no longer load on the page.  This is how I load the API

    <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol"></script>

    and while debugging I see that the control is going to the catch block and is throwing this error for me. 

    TypeError: Cannot read property 'prototype' of null.

    in the try block, this is the line where the control goes to the catch block.

    map = new Microsoft.Maps.Map(document.getElementById($attrs.id), options);

    This works in V7 perfectly fine.

    Kindly help

    Regards

    Benil 

    Wednesday, March 22, 2017 5:01 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