bing map APi angularjs 1.6.4 Error

Question

I am scratching my head trying to figure out integrating bing map api to angularjs 1.6.4 . Can any one help..?.

Here is my html

https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer>

below code is inside Body tag.

my angular controller code is as follows

$scope.map = null;

    function loadMapScenario() {

        console.log('Load scenario called');

        var map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
            credentials: 'Ao-Rs8NHwtlEI5piXQCcxMZrTfAt9zbg7a-8hB4PLAcc0eo5nZPN84aY16noJGKS',
            center: new Microsoft.Maps.Location(41.264675, -96.041927),
            zoom: 4
        });
    }

    //$scope.map = null;
    $scope.init = function () {


        console.log('Map init');
        $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
            credentials: 'api Key',
            center: new Microsoft.Maps.Location(41.264675, -96.041927),
            zoom: 4
        });
    };

    angular.element(document).ready(function () {
        $scope.init();
    });

Issues:

I get following error

Uncaught ReferenceError: Microsoft is not defined

and

Uncaught TypeError: window[Microsoft.Maps.CallbackOnLoad] is not a function

Any idea what wrong in this code ?

Appreciate your help

Bulkan · Accepted Answer · 2017-07-30 09:38:37Z

0

This error Uncaught ReferenceError: Microsoft is not defined you're not loading the Bing Map API before running your code.

Looking at the Bing API docs it seems like you need to define a callback function on the window object which will be called when the script loads.

answered Jul 30, 2017 at 9:38

Bulkan

2,5921 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett Law · Accepted Answer · 2017-08-18 12:54:44Z

EDIT: I rechecked my work. I was loading this again inside my controller using the loadMapScenario function. The GitHub sample here also loads the map inside the controller. The callback does not appear to work with Angular 1 at this time. However, you should be able to load with the call. I do think it helps to put the mapcontrol tag after your script file. See the Github example, which does work.

EDIT 2: I managed to hack something together that is DECIDEDLY NOT Angular best practices compliant. In my script tag I define the callback function mapLoaded. Outside and before controller definitions, I define the following:

 var mapReady = false;

    function mapLoaded() {
       mapReady = true;
    }

And then in the controller, I have a simple monitor function that waits for the variable to be true or the a specified amount of time to elapse. It's ugly, but to address the other answer to this topic, I've seen lots of people say that you can add this function to the window object, but no code that works, and I've tried it every which way there is a sample.

Removing previous bad code in answer strikeout below to shorten post and keep it relevant without losing the wrong answer completely.

It looks like your bing script tag is wrong somehow -- That's what would produce the 'Microsoft is not defined' eror. Also, if you have the callback function defined in the script tag, you don't need it in the $scope.init, and you don't need the document ready.

<script src="js/app.js"></script> <script type="text/javascript" src="//www.bing.com/api/maps/mapcontrol?callback=AsyncMapLoad" async defer></script>

I changed the callback name, but that is a direct copy and paste from some working angular code to load maps and the autosuggest feature.

The relevant part of app.js looks like this (I have extracted some of the map code to a service for my own reasons, so the first function is in a service referenced in the second function which is in a controller that references the service:

Collectives™ on Stack Overflow

bing map APi angularjs 1.6.4 Error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related