google maps avec ionique

J'ai changé un peu les choses pour que tout cela fonctionne:

Vous n'avez pas besoin d'une clé api pour google maps, cela est suffisant pour que le script src (voir Quel est le Google Maps API Key):

<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

Remplacer "la fonction initialize()" par "$champ d'application.init()" et commentez la ligne où il est dit:

//google.maps.event.addDomListener(window, 'load', initialize);

Également ajouter ng-init="init()" dans votre code html comme ceci:

<ion-header-bar class="bar-dark" ng-init="init()">
    <h1 class="title">Map</h1>
</ion-header-bar>

Je ne sais pas pourquoi ça ne fonctionne pas avec le domListener, mais les données doivent être initialisées avant de les afficher (voir Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth', null). Avec ng-init vous pouvez atteindre cet objectif.

Contrôleur Final devrait ressembler à ceci:

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {

    $scope.init = function() {
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
          content: compiled[0]
        });

        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        $scope.map = map;
    };

    //google.maps.event.addDomListener(window, 'load', initialize);

    $scope.centerOnMe = function() {
        if(!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
          content: 'Getting current location...',
          showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          $scope.loading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
    };

    $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
    };
});

Espère que cela a aidé!

OriginalL'auteur error1337

Si vous utilisez la dernière version de Ionique, les chances sont que vous ferez l'expérience d'un vide de l'écran lorsque vous déployez pour android, mais vous pourrez voir la carte lorsque u exécuter la solution dans un navigateur web.
Pour résoudre ce problème, il faut ajouter une liste de plugin, exécutez: ionique plugin ajouter cordova-plugin-blanche.

OriginalL'auteur code-assassin

Vous pouvez utiliser le plugin angularjs-google-maps (ngmap) fait pour angularjs.
Il travaille pour ionique.
Il vous donne la possibilité d'utiliser google map v3.

https://github.com/allenhwkim/angularjs-google-maps

OriginalL'auteur Fabien Thetis