How to set language dynamically at Bing Maps JavaScript V8

Question

The problem is that when I load Map with one language and want it to be changed to another language. I tried to achieve it this way:

map.dispose()
add <script/> with setLang and setMkt
create map again

but that way not works... it simply loads my local language.

Workable Decision:

let map = new Microsoft.Maps.Map(el, {credentials: key});
// remove map
map.dispose();

// create script and insert it
let script = document.createElement('script');

window.GetMap = function() {
    delete window.GetMap;
    // 1. remove script tag
   //  2. Now we create map again when script was loaded
   map = new Microsoft.Maps.Map(el, {credentials: key});
}

// NOTICE: we set language AND user location both
script.src = "https://www.bing.com/api/maps/mapcontrol?callback=GetMap&setLang=zh&UR=CN";
document.head.append(script);

I updated code so that you'll understand approach better. but off course it's not a workable code. it's just an idea which works. I tested it — user2434435, Apr 30 '18 at 14:14

score 0 · Answer 1 · answered Apr 27 '18 at 16:38

The issue with your code is that the Bing Maps control loads a lot of additional resources asynchronously, so when your new map instance is created, the resources aren't yet loaded. Here is a code sample for lazy loading the map control which will wait until all the resources are loaded.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script type='text/javascript'>
    var map;

    function loadMap() {
        if (!map) {
            var mapScriptUrl = 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]';
            var script = document.createElement("script");
            script.setAttribute('defer', '');
            script.setAttribute('async', '');
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", mapScriptUrl);
            document.body.appendChild(script);
        }
    }

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {});
    }
    </script>
</head>
<body>
    <input type="button" onclick="loadMap()" value="Load Map"/>
    <div id="myMap" style="position:relative;width:800px;height:600px;"></div>
</body>
</html>

Now, this will solve the timing issue, however loading the map control twice in the same page may cause issues.

How to set language dynamically at Bing Maps JavaScript V8

1 Answers1