Bing Maps v8 using Angular v1

Question

I'm trying to upgrade my Bing Maps v7 to v8, and according to the documentation I should be able to swap the urls and it will work with possible minor issues.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://www.bing.com/api/maps/mapcontrol?branch=release'></script>
<body ng-app="myApp">

<div ng-controller="bingCtrl" ng-init="init()" ng-cloak>
    <div id="mapDiv"></div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("bingCtrl", function($scope) {
    $scope.map = null;
    $scope.init = function() {
          $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'));
    };
});
</script>

</body>
</html>

I removed all the code to see if I could isolate the issue and I can with the code above. I get the following error. Any ideas why this isn't working?

TypeError: Cannot read property 'prototype' of null

score 2 · Answer 1 · answered Oct 26 '16 at 10:48

2

It seems Bing Maps API is not ready when the map is getting initialized via ng-init. To guarantee Bing Maps library is loaded you could utilize ready event.

Solution

Replace ng-init="init()" with:

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

Demo: plunker

answered Oct 26 '16 at 10:48

Vadim Gremyachev

57,952
20
129
193

Can you help me with this thread.... http://stackoverflow.com/questions/43162044/bingmap-getting-prototype-of-null-error – Shane Apr 01 '17 at 21:22

score 0 · Answer 2 · edited May 23 '17 at 12:10

Swapping out URL's only works in some apps, not all apps. This is not a standard app.

Looking into this it appears that your Angular code is firing before the Bing Maps code is fully loaded. As a result some parts of the map API are not yet defined and the null reference is encountered. To be honest, this code likely didn't work 100% of the time when you used v7. It likely failed the first time, then once the map control was cached, worked.

Several have been using Bing Maps V8 with Angular 2, this is the first app I've come across using Angular 1. Here is a modified version of your app, but it kind of defeats the purpose of using Angular.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://www.bing.com/api/maps/mapcontrol?branch=release'></script>
<body ng-app="myApp">

<div ng-controller="bingCtrl" ng-init="init()" ng-cloak>
    <div id="mapDiv"></div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("bingCtrl", function($scope) {
    $scope.map = null;
    $scope.init = function() {     
        //Try loading the map every 100ms until it works.
        var interval = setInterval(function(){
            try{
                $scope.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'));
                clearInterval(interval);
             }catch(e){
             }
         }, 100);
    };  
});
</script>

</body>
</html>

Here are some posts where devs have used Bing Maps V8 with Angular 2:

How to add Bing Maps v8 to Angular 2.0?

https://github.com/youjustgo/ng2-bingmaps

I'm sure there is a better way to do this. Will have the dev team look into this as well.

I never ran into these problems with V7 (cached vs not cached), and unless an upgrade to Angular V2 is absolutely necessary I'd rather not have to switch everything over. — user5418997, Oct 12 '16 at 15:55
I tried your code using V7 and cleared my cache. The error occurred in some of the older browsers. New browsers seem to handle it better. That said, as I noted above, I'll have the dev team look into this for V8. — rbrundritt, Oct 12 '16 at 20:58
@rbrundritt: Can you help me with this thread... http://stackoverflow.com/questions/43162044/bingmap-getting-prototype-of-null-error — Shane, Apr 01 '17 at 21:22

Bing Maps v8 using Angular v1

2 Answers2