Error "Uncaught TypeError: Microsoft.Maps.loadModule is not a function"

Question

I'm using the Vue.js with Vuetify framework. I need to use a form with a location address field. That field has to suggest the list of location addresses, when the user starts typing in the place name.

The end goal is to achieve as shown here: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#JS However, I am getting the following error: TypeError: Microsoft.Maps.loadModule is not a function.

 metaInfo () {
      return {
        script: [{
          src: `https://www.bing.com/api/maps/mapcontrol?key=[bing_map apikey]`,
          async: true,
          defer: true,
          callback: () => this.loadMapScenario() // will declare it in methods
        }]
      }
    },
  methods: {
    loadMapScenario() {
       Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest", {
      callback: () => {
        var options = { maxResults: 5 };
        var manager = new Microsoft.Maps.AutosuggestManager(options);
        manager.attachAutosuggest("#searchBox", "#searchBoxContainer");
      },
    });
    },

user_1245450 · Answer

The Bing Maps Web SDK loads a bunch of additional resources asynchronously as well that you have to wait for. As such, you should specify the callback parameter in the URL like the sample you pointed does (see the script tag in the HTML tab). Here is the tag extracted from the sample, see &callback=loadMapScenario

Error "Uncaught TypeError: Microsoft.Maps.loadModule is not a function"

1 Answers