Карты Google для AngularJS

Ответ 1

Я предлагаю другую альтернативу, ng-map.

Я создал директиву google maps angularjs, называемую ng-map, для моего собственного проекта. Это не требует кодирования Javascript для простой функциональности.

Чтобы начать работу

Один. Загрузить и включите ng-map.js или ng-map.min.js

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

Два. используйте тег map и, необязательно, теги control, marker и 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>`  

Примеры

Чтобы использовать его в своем приложении, просто включите "ngMap" в зависимости от вашего приложения.

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

Надеюсь, что это поможет

-------------- EDIT -------------------

Для тех, кто ищет версию angular2,
есть также ng2-map https://ng2-ui.github.io/#/google-map

Ответ 2

Кажется, что вы включили атрибут "маркеры" в свой элемент google-map.

Действительно, как говорится в @Tyler Eich, документы на 5 декабря 2013 года устарели. Удаление атрибута маркера, похоже, заставляет его работать.

Вот как отображать маркеры:

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

Ответ 3

Мне просто нужно было внедрить карту google в мое приложение angular. Поскольку моя реализация требует чего-то довольно простого, я решил сделать это сам и создать простую директиву. Я оставлю свой источник ниже для всех, кто может найти его полезным.

• Создать директиву
• Создать HTML
• Дополнительно передавайте координаты через директиву/контроллер, если вам нужно.

ДИРЕКТИВА

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>

Вот и все. Помните, что строка запроса google называется "pb", это код, используемый во всех кодеках встраивания, которые вы можете захватить из Google. Вы можете передать это директиве прямо или если вам нужно через ваш контроллер или даже через самую директиву. Вы можете установить любые параметры карты iframe в директиве внутри шаблона.

Чтобы переключиться между Просмотром улиц или видом карты, вы просто отправляете соответствующий код в зависимости от источника, из которого вы его получаете (db, json и т.д.).

В приведенном выше примере:

Код улицы:

! 1M0! 3м2! 1sen! 2srs! 4v1445332712674! 6m8! 1m7! 1s34JkuBgIzmIJNmpFNThuUg! 2м2! 1d40.75816449978445! 2d-+73,98911289129973! 3f175.51693470959802! 4f7.069842517148402! 5f0.7820865974627469

Код карты:

! 1m18! 1m12! 1м3! 1d755.5452773113641! 2d-73,98946157079955! 3d40.75804119870795! 2м3! 1f0! 2f0! 3f0! 3м2! 1i1024! 2i768! 4f13.1! 3м3! 1м2! 1s0x0000000000000000% 3A0x1952a6258d36ecc5! 2sMcDonald'S! 5e0! 3м2! 1sen! 2srs! 4v1445332854795

У нас еще не было никаких проблем. Здесь скрипка: jsFiddle

Ответ 4

Если вы хотите включить маркеры, вы должны сделать это в другом элементе в директиве google-maps. Вы должны сделать что-то вроде:

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

Ответ 5

Для Angular2 существует angular2-google-maps. Лицензия на 2016-05-14: MIT.