Bing Maps Geocode Callbacks Don't Get Called

Question

Overall Picture:

I want to add geocoding to my application. I was able to get it working in straight up JavaScript, but the callbacks are not getting triggered after converting to Angular/TypeScript.

Example: if a user enters 1 Microsoft Way, Redmond, WA. The longitude and latitude should be returned: latitude: 47.64006815850735, longitude: -122.12985791265965

Code examples are built off the following resources:

Error Details:

The errors are occurring specifically within the variable name: geocodeRequest. searchModuleLoaded() gets loaded, but my geocodeRequest never triggers geocodeCallback or errCallback. I'm thinking it has something to do with the scope of my methods, but can't seem to isolate what is causing the error. Any ideas on how to get my callbacks to trigger?

Angular/TypeScript (Not Working)

$onInit() {
    this.getMap();
}

getMap() {
    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "your key here"});
    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: this.searchModuleLoaded });
};

searchModuleLoaded() {
    var searchManager = new Microsoft.Maps.Search.SearchManager(this.map);
    var geocodeRequest = {
        where: "1 Microsoft Way, Redmond, WA",
        count: 10,
        callback: this.geocodeCallback,
        errorCallback: this.errCallback
    };

    searchManager.geocode(geocodeRequest);
}

geocodeCallback(geocodeResult, userData) {
    // this callback never gets triggered
    alert("The first geocode result is " + geocodeResult.results[0].location + ".");
}

errCallback(geocodeRequest) {
    // this callback never gets triggered
    alert("An error occurred.");
}

Working Version (Works, but no Angular/TypeScript)

function GetMap(){

    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "key goes here", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });

    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchModuleLoaded });
}

function searchModuleLoaded(){
    var searchManager = new Microsoft.Maps.Search.SearchManager(map);

    var geocodeRequest = {where:"1 Microsoft Way, Redmond, WA", count:10, callback:geocodeCallback, errorCallback:errCallback};
    searchManager.geocode(geocodeRequest);
    debugger;
}

function geocodeCallback(geocodeResult, userData){
    alert("The first geocode result is " + geocodeResult.results[0].location + ".");
}


function errCallback(geocodeRequest){
    alert("An error occurred.");
}

score 1 · Answer 1 · answered Oct 12 '16 at 14:44

After furthing investigation, I was able to resolve my issue.

What was the problem?

The issue was occurring within the searchModuleLoaded. Both callbacks were undefined. One issue is that it was trying to execute searchModuleLoaded before the module had loaded and another issue was caused because it didn't know the context of this.

To fix the issue, I had to modify the callback while loading Microsoft.Maps.Search. The module's callback is now converted to a lambda function, which calls this.searchModuleLoaded(). Once this gets compiled into JavaScript, it sets the this context appropriatly i.e _this = this. My code looks like this now:

getMap() {
    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "put your key here"});
    Microsoft.Maps.loadModule('Microsoft.Maps.Search', {
        callback: () => {
            this.searchModuleLoaded();
        }
    });
};

searchModuleLoaded() {
    var searchManager = new Microsoft.Maps.Search.SearchManager(this.map);
    var geocodeRequest = {
        where: "1 Microsoft Way, Redmond, WA",
        count: 10,
        callback: this.geocodeCallback,
        errorCallback: this.errCallback
    };
    searchManager.geocode(geocodeRequest);
};

geocodeCallback(geocodeResult, userData) {
    alert("The first geocode result is " + geocodeResult.results[0].location + ".");
};

errCallback(geocodeRequest) {
    alert("An error occurred.");
};

Bing Maps Geocode Callbacks Don't Get Called

1 Answers1