ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
193 stars 187 forks source link

Bing Maps issue in Ionic v1 Framework #244

Open yogi2806 opened 7 years ago

yogi2806 commented 7 years ago

Short description of the problem:

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.

What behavior are you expecting?

Proper navigation bar functionality with zoom in,out and location button should function has expected.

Steps to reproduce:

  1. Plunker link below shows bing maps.
  2. Clicking on zoom buttons nothing functions as expected.
  3. Clicking on location buttons nothing functions as expected.
This is main code for map initialization:

.controller('DashCtrl', function($scope) {

    var map = null;
    $scope.showButtons = false;
    $scope.data = "Search address";

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

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

      var mapOptions = {
        credentials: 'ArRRRCiVKdXoZuCvmo13Nb5P2SHAnHS-JHxxirMzNIfsnnWGfSwfep7gZX2Ozyjk',
        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);

    };

})

Other information: Issue posted on stackoverflow as below: https://stackoverflow.com/questions/43220948/bing-maps-in-ionic-v1-framework-is-not-working

Issue was also posted here but closed without solution: https://github.com/driftyco/ionic-v1/issues/237 https://github.com/driftyco/ionic/issues/11066

Which Ionic Version? Ionic version 1.x

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview

Run ionic info from terminal/cmd prompt: Your system information:

Cordova CLI: 6.4.0 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v7.3.0 Xcode version: Not installed

I tried even with ionic version 1.x but no help as we can see in plunker :(

yogi2806 commented 7 years ago

Any solution guys on this? No one has answered me yet.

yogi2806 commented 7 years ago

I was able to check in IE it was working fine but in Google chrome,android and iOS it was not working fine.Issue still exist.