CODEWITHSUNDEEP
javascriptangularjscordovaionic-frameworkbing-maps
yogi2806
yogi2806

Reputation: 11

Bing Maps in Ionic v1 Framework is not working

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.

Upvotes: 0

Views: 314

Answers (1)

rbrundritt
rbrundritt

Reputation: 18003

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.

Upvotes: 0

Related Questions