Uncaught TypeError: Cannot read property 'authenticateClientAndRetrieveSessionId' of undefined

user_15265295 0
Viewed 206

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. enter image description here The end goal is to achieve as shown here on Vue js framework: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap#JS

 <template>
 <v-app>
    <div id="searchBoxContainer">
      <v-text-field
        id="searchBox"
        v-model="startlocation"
        label="Start Location"
        prepend-inner-icon="mdi-map-marker"
        outlined
        rounded
        dense
      ></v-text-field>
    </div>
  </v-app>
</template>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[bing-map apikey]'></script>

 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");
      },
    });
    },
bing-maps vuetify.js vue.js autosuggest javascript
1 Answers

I found a fix for this!

I used the snippet that was shared here and my code now looks like this:

function GetMap() {
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                    callback: onLoad,
                    errorCallback: onError
                });
                function onLoad() {
                    var options = { maxResults: 5 };
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#search_78', '#header-search', selectedSuggestion);
                }
                function onError(message) {
                    document.getElementById('printoutPanel').innerHTML = message;
                }
                function selectedSuggestion(suggestionResult) {
                    document.getElementById('printoutPanel').innerHTML =
                        'Suggestion: ' + suggestionResult.formattedSuggestion +
                            '<br> Lat: ' + suggestionResult.location.latitude +
                            '<br> Lon: ' + suggestionResult.location.longitude;
                }
                
            }

After going back to my page, the error changed and it said that my credentials were invalid, and it redirected me to https://www.bingmapsportal.com/Application where I could create a valid key. Using that key fixed the problem and now I can see the suggested addresses form.

user_21330310
Related