angularjs - bootstrap - angle template demo

Google maps para AngularJS

Question

Soy muy nuevo en AngularJS y estoy tratando de usar https://github.com/angular-ui/angular-google-maps .

Solo estoy tratando de hacer que el mapa se represente en mi página, pero recibo un mensaje de error y no sé lo que significa. Cualquier ayuda para comprender este mensaje de error sería apreciada.

He creado un plunk aquí:

github.com/twdean/plunk

Aquí está el error en el navegador:

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

Answer 1

Acabo de tener la necesidad de implementar un mapa de Google en mi aplicación angular. Como mi implementación requería algo bastante simple, decidí hacerlo yo mismo y crear una directiva simple. Dejaré mi fuente a continuación para cualquier persona que pueda encontrarla útil.

1. Crea una directiva
2. Crear HTML
3. Opcionalmente, pase las coordenadas a través de la directiva / controlador si lo necesita.

DIRECTIVA

angular.module(''ngPortalApp'')
  .directive(''googleMap'', function () {
    return {
      template: ''<iframe width="100%" height="350" frameborder="0" style="border:0"></iframe>'',
      restrict: ''E'',
      scope: {
        pbcode: ''=''
      },
      link: function postLink(scope, element) {
        var mapFrame = element.find("iframe");
          if (scope.pbcode) {
            mapFrame.attr(''src'', "https://www.google.com/maps/embed?pb=" + scope.pbcode);
          }
          else {
            mapFrame.attr(''src'', '''');
          }
      }
    };
  });

HTML

<div class="col-lg-12">
<google-map pbcode="''!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNmpFNThuUg!2m2!1d40.75816449978445!2d-73.98911289129973!3f175.51693470959802!4f7.069842517148402!5f0.7820865974627469''"></google-map>
</div>

Eso es todo al respecto. Recuerde que la cadena de consulta de google se llama "pb", este es el código utilizado en todos los códigos insertados que puede obtener de Google. Puede pasar esto a su directiva directamente o si necesita a través de su controlador o incluso a través de la directiva en sí. Puede establecer cualquier configuración de mapa iframe en la directiva dentro de la plantilla.

Para cambiar entre Street View o Map View, simplemente envíe el código correspondiente, independientemente de la fuente de donde provenga (db, json, etc.).

Para el ejemplo anterior:

Código de calle:

! 1m0! 3m2! 1sen! 2srs! 4v1445332712674! 6m8! 1m7! 1s34JkuBgIzmIJNmpFNThuUg! 2m2! 1d40.75816449978445! 2d-73.98911289129973! 3f175.51693470959802! 4f7.069842517148402! 5f0.7820865974627469

Código de mapa:

! 1m18! 1m12! 1m3! 1d755.5452773113641! 2d-73.98946157079955! 3d40.75804119870795! 2m3! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x0000000000000000% 3A0x1952a6258d36ecc5! 2sMcDonald''s! 5e0! 3m2 ! 1sen! 2srs! 4v1445332854795

No he tenido ningún problema con esto todavía. Aquí hay un violín: jsFiddle

Answer 2

Para Angular2, hay angular2-google-maps . Licencia a partir del 2016-05-14: MIT.

Answer 3

Parece que estás incluyendo un atributo "marcadores" dentro de tu elemento de google-map .

De hecho, como menciona, los documentos a partir del 5 de diciembre de 2013 siguen obsoletos. Eliminar el atributo del marcador parece hacer que funcione.

Aquí es cómo mostrar marcadores:

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;
});

Answer 4

Si desea incluir marcadores, debe hacerlo en otro elemento dentro de la directiva google-maps. Deberías hacer algo como:

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

Answer 5

Sugiero otra alternativa, ng-map.

Creé una directiva angularjs de google maps llamada, ng-map, para mi propio proyecto. Esto no requiere ninguna codificación Javascript para funcionalidad simple.

Para empezar

Uno. Download e incluya ng-map.js o ng-map.min.js

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

Dos. use la etiqueta de map y, opcionalmente, las etiquetas de control , marker y shape

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</ng-map>`  

Ejemplos

Para usarlo en su aplicación, simplemente incluya ''ngMap'' como dependencia de su aplicación.

var myApp = angular.module(''myApp'', [''ngMap'']);

Espero eso ayude

-------------- EDITAR -------------------

Para aquellos que buscan la versión angular2,
También hay ng2-map https://ng2-ui.github.io/#/google-map