🥇 Aguardando a API do Google Maps apenas quando ela for necessária em seu aplicativo AngularJS

Bem, finalmente meu primeiro artigo Coderwall ganha vida!

Se você estiver usando a API do Google Maps em seu aplicativo AngularJS , provavelmente sabe que ela precisa ser totalmente carregada antes de ser usada.

É por isso que o URL da API do Google aceita um nome de retorno de chamada a ser chamado assim que estiver pronto; a função de retorno de chamada deve ser definida no contexto da janela.

Você deve atrasar o bootstraping de seu aplicativo para garantir que a api estará lá antes de ser usada … Bem, isso é uma maneira, mas que tal um aplicativo com várias rotas e apenas uma dependente da API de mapas? …

Se você estiver usando um roteador capaz de lidar com resolvedores (ngRouter, segmento de rota angular ou ui-router), este pequeno exemplo pode ajudá-lo:

map.js

var googleMaps = {
    ready   : false,
    resolver: {
        map: ['$q', function($q) {

            if (!googleMaps.deferred) {

                googleMaps.deferred = $q.defer();
            }

            if (googleMaps.ready) {

                googleMaps.deferred.resolve();
            }

            return googleMaps.deferred.promise;
        }]
    }
};

window.onGoogleReady = function () {

    googleMaps.ready = true;

    if (googleMaps.deferred) {

        googleMaps.deferred.resolve();
    }
};

app.js (usando ui-router)

$stateProvider
        ...
        .state('some.map.state', {
            url        : '/map',
            templateUrl: 'view/some.map.state.html',
            controller : 'some.map.state',
            resolve    : googleMaps.resolver
        })
        ...

Lembre-se de incluir os scripts na ordem correta:

<script src="your/map.js"></script>
<script src="your/app.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>

Related Posts