Интеграция ui-карт для Google Maps с Angular

Ui-maps - отличный инструмент для интеграции карт Google в ваше приложение angular. На мой взгляд, использование ui-карт намного проще, чем использование Fusion Tables. Например, вместо того, чтобы вводить данные на панели инструментов таблицы Fusion, все можно сделать в вашем собственном коде. Мне также очень нравится внешний вид пользовательских карт.

Перво-наперво вам нужно установить ui-карты в свой проект с помощью bower:

bower install angular-ui-map

Если у вас нет беседки, перейдите на сайт беседки и установите ее.

Теперь, когда все готово, вам нужно перейти в Google и получить ключ API для карт Google. Как только у вас есть это, вам нужно добавить уникальный ключ к URL-адресу api для карт Google. Макет этого URL-адреса должен выглядеть следующим образом:

https://maps.googleapis.com/maps/api/js?key=YOUR_UNIQUE_KEY&callback=initMap

**** Вы должны поместить свой уникальный ключ, предоставленный Google, где я поставил YOUR_UNIQUE_KEY ****. Теперь добавьте URL-адрес в тег скрипта на вашей html-странице.

Хорошо, теперь вы готовы использовать эту карту в Angular с ui-картами! Вот пример того, как я разместил карту на своей странице с помощью ui-maps:

<div id="map" ui-map="model.myMap" class="angular-google-map-container" ui-options="mapOptions"></div>

Div, который вы видите здесь, - это сама карта. Чтобы сделать эту карту видимой, установите ее ширину. Обычно я просто устанавливаю его на 400 пикселей, вот так:

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

Вы можете установить свою карту и параметры карты как объекты в области действия контроллера, перенести эти объекты в html div, затем BAM, у вас есть карта! Вот мой контроллер для карты выше:

$scope.lat = "0";
$scope.lng = "0";
$scope.model = { 
     myMap: new google.maps.Map(document.getElementById('map') 
};
$scope.mapOptions = {
      center: new google.maps.LatLng($scope.lat, $scope.lng),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      clickable: true
  };

Это даст вам базовую карту, настроенную на любую желаемую широту и долготу. Это лишь некоторые из основных параметров карты, но дополнительные параметры можно найти в документации по API карт Google.

Теперь, когда у вас есть эта карта, подумайте, как вы можете изменить ее состояние с помощью Angular!