angulaire Google Maps ui-gmap-google-map ne charge pas la carte

J'ai scénario simple mais encore, ne fonctionne pas ..:angulaire Google Maps ui-gmap-google-map ne charge pas la carte

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myapp"> 
<head> 
    <meta charset="utf-8"> 
    <title>app</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

    <!-- Custom--> 
    <link rel="stylesheet" href="/css/style.css"> 
    <script type="text/javascript" src="/js/lodash.js"></script> 
    <script type="text/javascript" src="/js/angular.js"></script> 
    <script type="text/javascript" src="/js/angular-simple-logger.js"></script> 
    <script type="text/javascript" src="/js/angular-google-maps.js"></script> 
    <script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script> 


    <script type="text/javascript" src="/js/app/app.js"></script> 

    <!-- Controllers --> 
    <script type="text/javascript" src="/js/app/controllers/MainController.js"></script> 

</head> 
<body ng-controller="MainController"> 

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map> 

</body> 
</html>

app.js

var myapp = angular.module('myapp', ['uiGmapgoogle-maps']); 

myapp.config(function (uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     key: 'MY_API_KEY', 
     // v: '3.28', 
     libraries: 'weather,geometry,visualization' 
    }); 
});

MainController.js

myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) { 

    uiGmapGoogleMapApi.then(function (maps) { 
     $scope.maps = maps; 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 }; 
    }); 

});

style.css

ui-gmap-google-map{ 
    border: 1px dashed darkred; 
    width: 500px; 
    height: 300px; 
    display: inline-block; 
} 

.angular-google-map-container { 
    width: 400px; 
    height: 400px; 
}

Aucune erreur dans la console. Le CSS s'applique, la promesse dans le contrôleur fonctionne bien mais aucune carte n'est affichée.

Le fait que le DOM est de rester comme ça me tracasse:

<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>

parce que sur le site par exemple, je vis que angulaire est en train de changer comme ça:

<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container"> 
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>

(ou quelque chose comme

Une idée de ce que je fais mal?

Source

2017-06-08 T1000

je trouve quel est le problème, parce que je l'ai également inclus

<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>

Après la suppression, tout commence à travailler normal.

Source

2017-06-09 08:29:07 T1000

Depuis votre chargement de la carte dans une promesse, essayez d'utiliser ng-if pour le rendre conditionnel (comme spécifié here):

<ui-gmap-google-map ng-if='map.center' 
        center='map.center' 
        zoom='map.zoom'> 
</ui-gmap-google-map>

travail démo here.

Source

2017-06-08 23:22:21

Malheureusement cela ne fonctionne pas pour moi et le problème reste le même .... Je viens de copier/coller votre code et ne fonctionne pas: O – T1000

En fait, une fois que j'ai rechargé l'écran, il charge la carte ... juste une fois: O c'est étrange ... très étrange – T1000

angulaire Google Maps ui-gmap-google-map ne charge pas la carte

Répondre

Questions connexes