Bing Maps in Ionic v1 Framework is not working

Question

I am trying to use Bing maps API in ionic v1 framework app which builds on android,iOS and windows platforms.

I am facing problem in Bing maps which is plotting properly but zoom in,zoom out,changing the map type from aerial to road & fetching current location these buttons are not functional.I have proper API key to access maps. I even tried it doing ionic serve on browser but nothing helped me.

I have followed code from the below link: https://github.com/eppineda/ionic.bing-map-demo

I have also changed JS src file of bing maps in index.html page from: src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'

To

src='http://www.bing.com/api/maps/mapcontrol'

The src file i have changed referring to Microsoft document pages as below: http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#loadMapAsync+HTML

Issue can be seen in the link - http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview

$scope.init = function () {
  console.log('Map init');

  var mapOptions = {
    credentials: '',
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    center: new Microsoft.Maps.Location(51.5033640, -0.1276250),
    zoom: 15,
    // showLocateMeButton: false,
    // // NavigationBarMode: "default",
    // // NavigationBarOrientation: "vertical",
    // showZoomButtons: false,
    // ShowNavigationBar: false
    showDashboard: true
    // // showMapTypeSelector : true
    // // showMapTypeSelector: false
    // navigationBarMode: Microsoft.Maps.NavigationBarMode.compact

  };
  map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions);
  console.log(map);

};

Please help me out to figure this out.It would be really helpful with the solution. Thanks in advance.

Can you provide a bit more information. The new map URL you are saying you are using doesn't have a callback parameter in it, so that doesn't align with the async sample you pointed to. Is the map loading up and you can see the navigation bar? Is the issue mainly with interacting with the map? Does panning work? Can you provide any code? — rbrundritt
As i am running it on ionic,i am initialing map using controller once deviceready function is called.I am able to see navigation bar with location,zoom in and zoom out buttons but these are not functional. — yogi2806
Below is my controller code: $scope.init = function () { console.log('Map init'); var mapOptions = { credentials: 'my api key here', mapTypeId: Microsoft.Maps.MapTypeId.road, center: new Microsoft.Maps.Location(51.5033640, -0.1276250), zoom: 15 } map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions); }; — yogi2806

rbrundritt rbrundritt · Accepted Answer · 2017-04-06T23:24:23

I suspect there is one of two issues. The first is that you have some other HTML element above the map and/or navigation bar/buttons. This would block you from being able to press those buttons. The second is that your code is actually loading the map twice somehow and as such you are ending with two maps on top of each other. When this happens the navigation bar for the bottom map ends up on top and using it actually changes the bottom hidden map. I've seen this occur once before in someone else's app who load the map twice to the same div.

Bing Maps in Ionic v1 Framework is not working

1 Answers