web-dev-qa-db-fra.com

Google maps pour AngularJS

Je suis très nouveau sur AngularJS et j'essaie d'utiliser https://github.com/angular-ui/angular-google-maps .

J'essaie simplement d'obtenir le rendu de la carte sur ma page mais un message d'erreur s'affiche et je ne sais pas ce que cela signifie. Toute aide pour comprendre ce message d'erreur serait appréciée.

J'ai créé un dossier ici:

github.com/twdean/plunk

Voici l'erreur dans le navigateur:

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2
angularjsgoogle-mapsgoogle-maps-api-3angularjs-directiveangularjs-google-maps
29
tdean

Il semble que vous incluez un attribut "marqueurs" dans votre élément google-map. 

En effet, comme le mentionne @Tyler Eich , les documents au 5 décembre 2013 restent périmés. Supprimer l'attribut marker semble le faire fonctionner.

Voici comment afficher les marqueurs:

index.html

<div ng-controller="MapCtrl">
    <google-map id="mymap" 
            center="center" 
            zoom="zoom" 
            draggable="true"                                    
            mark-click="false">
            <markers>
                <marker ng-repeat="marker in markers" coords="marker">
                </marker>
            </markers>
    </google-map>
</div>

controller.js

var controller = module.controller('MapCtrl', function($scope) {
  $scope.myMarkers = [
      {
         "latitude":33.22,
         "longitude":35.33
      },
      ...
  ];

  $scope.center = {
      latitude: 33.895497,
      longitude: 35.480347,
  };

  $scope.zoom = 13;
  $scope.markers = $scope.myMarkers;
  $scope.fit = true;
});
8
Nicholas Credli

Pour Angular2, il y a angular2-google-maps . Licence à partir du 14/05/2016: MIT.

0
koppor

Si vous souhaitez inclure des marqueurs, vous devriez le faire dans un autre élément de la directive google-maps .

<google-maps options="someOptionsObject"> 
<markers cords="someArrayWithLatitudeAndLongitudeCords"></markers>    
</google-maps>
0
PandAngular