Utilizando API Google Maps

Boa tarde meu aluno.

Você pode interagir através de um controller, inclusive de uma diretiva. Todavia, acredito que essa interação seja uma parte pequena da sua App que demanda muita atenção. Se eu acertei, talvez seja interessante usar algum plugin que já lide com esses detalhes de manipulação do Google Maps.

Por exemplo, há esse plugin

http://angular-ui.github.io/angular-google-maps/#!/

Eu nunca usei, mas parece promissor. A ideia do Angular é justamente aumentar a produtividade pelo reuso de código e utilizar plugins não é feito, pelo contrário, é altamente recomendado.

Não sei se respondi a sua pergunta, mas é por esse caminho que segui na minha resposta.

Qualquer coisa é só falar.

Sucesso e bom estudo meu aluno!

Bom dia professor!

No meu caso, nesse aplicativo, a interface do usuário é toda baseada no mapa. Eu utilizo vários recursos que a API do Maps oferece. Meu receio de usar um plugin, é da documentação não estar tão legível quanto a original ou dele não ter todas as funcionalidades que vou precisar implementadas.

Eu até consegui fazer o mapa rodar implementando ele em um controller, só me preocupo de não estar seguindo as boas práticas do Angular.

Vou colocar abaixo como fiz a criação do mapa e o caso de uso principal: quando o usuário arrasta e solta o mapa, faço uma requisição http para buscar objetos que serão colocados em suas coordenadas:

angular.module('erbfinder')
        .controller('MapaController', function ($scope, $window) {

    var map = null;

    var buscarObjetos = function () {
        console.log('buscando...');
        // faz requisição http
    };

    var iniciarMapa = function () {
        console.log('carregando mapa');

        var center = new google.maps.LatLng(-22.8975, -49.6445)

        var mapOptions = {
            zoom: 7,
            center: center,
            mapTypeId: 'terrain'
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        google.maps.event.addListener(map, 'dragend', buscarObjetos);
    }

    $window.onload = iniciarMapa;
});

Partial mapa.html:

<div id="map-container" class="container">
    <div ng-model="map" id="map-canvas" style="width: 500px; height: 500px;"></div>
</div>

O conceito está correto? Consegue perceber algo que possa ser melhorado?