Bing Maps V8 Web Control and CommonJS

I am using Bing Maps V8 Web Control in a web application. I am also using Brunch to manage static assets, including JavaScript. By default, Brunch wraps all non-vendor JavaScript code in CommonJS modules.

Microsoft's documentation says to initialize the control with a callback parameter in the script import URL, like this:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>

With the loadMapScenario defined like this:

Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
    callback: onLoad,
    errorCallback: onError,
    credentials: 'Your Bing Maps Key'
});
function onLoad() {
    var options = { maxResults: 5 };
    var manager = new Microsoft.Maps.AutosuggestManager(options);
    manager.attachAutosuggest('#searchBox', '#searchBoxContainer', 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;
}

The issue is that I get an error from the API saying that the callback function is invalid.

Is there a better way to do this? Is there a way for the web control to call a CommonJS-wrapped function in this manner?

Solution

See the issues with your code below:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script> In this line a callback function loadMapScenario is defined but its not exists.
Map functions call only after including bing map library js.

Solution

There is a sample code provided by bing maps. See http://www.bing.com/api/maps/sdk/mapcontrol/isdk#autoSuggestUiWithoutMap+HTML

If you are unable to see the above link then just see the below code. Just use your bing map api key to connect. Sample code provided here is Auto suggest without loading map. You can see different options in the above link.

<!DOCTYPE html>
<html>
<head>
    <title>autoSuggestUiWithoutMapHTML</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
    <div id='printoutPanel'></div>
    <div id='searchBoxContainer'><input type= 'text' id= 'searchBox'/></div>

    <div id='myMap' style='width: 100vw; height: 100vh;'></div>
    <script type='text/javascript'>
        function loadMapScenario() {
            Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                callback: onLoad,
                errorCallback: onError,
                credentials: 'Your Bing Maps Key'
            });
            function onLoad() {
                var options = { maxResults: 5 };
                var manager = new Microsoft.Maps.AutosuggestManager(options);
                manager.attachAutosuggest('#searchBox', '#searchBoxContainer', 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;
            }

        }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
</body>