0

Olá, estou tentando inicializar a API do Google Maps no controller da minha página Angular, só que ela simplesmente não inicia a função. Caso eu coloque ela diretamente na página, funciona sem problemas. Segue código do controller:

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize_contato() {
    var latlng = new google.maps.LatLng(-27.234350, -52.015356);
    var options = {
        zoom: 15,
        center: latlng, //localizacao do ponteiro, definida acima na var latlng.
        scrollwheel: false, //desativar scroll
        mapTypeControl: false, //desativa opcao de escolha de mapa
        panControl: false, //desativa movimentacao no mapa
        zoomControl: true, //desativa zomm no mapa
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapa_localiza_contato"), options);
}

function abrirInfoBox(id, marker) {
    if (typeof (idInfoBoxAberto) == 'number' && typeof (infoBox[idInfoBoxAberto]) == 'object') {
        infoBox[idInfoBoxAberto].close();
    }

    infoBox[id].open(map, marker);
    idInfoBoxAberto = id;
}

function carregarPontos_contato() {
    $.getJSON('app/pontos.json', function (pontos) {
        var latlngbounds = new google.maps.LatLngBounds();
        $.each(pontos, function (index, ponto) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                icon: 'app/template/img/icone_mapa.png'
            });
            var myOptions = {
                content: "\
                <br>\n\
                <img class=\"img-responsive\" alt=\"matriz\" ng-src=\"app/template/img/img_matiz.png\" src=\"app/template/img/img_matiz.png\">\n\
                <h1> Matriz </h1>\n\
                <p>49 34441 1111<br>\n\
                Rua Dr. Maruri, 1677 - Centro<br>\n\
                89700-000 - Concórdia - SC</p>\n\
                <br>",
                pixelOffset: new google.maps.Size(-150, 0)
            };
            infoBox[ponto.Id] = new InfoBox(myOptions);
            infoBox[ponto.Id].marker = marker;
            infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                abrirInfoBox(ponto.Id, marker);
            });
            markers.push(marker);
            latlngbounds.extend(marker.position);

        });
        var markerCluster = new MarkerClusterer(map, markers);
        map.fitBounds(latlngbounds);
    });
}

vm.mapa_localiza_contato = function () {
    setTimeout(function () {
        initialize_contato();
        carregarPontos_contato();
    }, 100);
};

Segue código HTML:

<footer ng-class="url_atual == '/contato' ? mapa_2 : mapa_1">
    <div class="contato_mapa">
        <div id="mapa_localiza_contato" class="mostra_mapa_contato">
            <div ng-init="vm.mapa_localiza_contato()"></div>
            <div class="centro_site">
                <div class="rodape">
                    <img class="img-responsive" ng-src="{{baseurl}}app/template/img/logo_bottom.png">
                    <div class="endereco">
                    </div>
                    <div class="icone_face_bottom">
                        <img ng-src="{{baseurl}}app/template/img/logo_bottom_facebook.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
15
  • Você já tentou substituir setTimeout por $timeout (sem esquecer de fazer a injeção no controller) ? Commented 13/04/2016 às 11:30
  • tentei agora e não mudou nada Commented 13/04/2016 às 11:35
  • Ele não aparece nem o mapa na tela? Quando você diz que colocando diretamente na página ele funciona, o que você quis dizer? Commented 13/04/2016 às 11:39
  • Quando eu coloco o código da API direto no arquivo .html, dentro das tags <script>, no lugar de onde tem a <div> com ng-init ele carrega o mapa normalmente. Com o código da API no controller, ele simplesmente não chama o mapa, é como se não tivesse não tivesse nada alí Commented 13/04/2016 às 11:46
  • 1
    @pmargreff ng-controller não é o único modo de se iniciar um controller, eu por exemplo nunca utilizo ela. Commented 13/04/2016 às 12:11

1 Resposta 1

0

consegui resolver o problema usando o seguinte código:

var map;
    var idInfoBoxAberto;
    var infoBox = [];
    var markers = [];

    function initialize_contato() {
        var latlng = new google.maps.LatLng(-27.234350, -52.015356);
        var options = {
            zoom: 15,
            center: latlng, //localizacao do ponteiro, definida acima na var latlng.
            scrollwheel: false, //desativar scroll
            mapTypeControl: false, //desativa opcao de escolha de mapa
            panControl: false, //desativa movimentacao no mapa
            zoomControl: true, //desativa zomm no mapa
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        carregarPontos_contato();
        map = new google.maps.Map(document.getElementById("mapa_localiza_contato"), options);
    }

    function abrirInfoBox(id, marker) {
        if (typeof (idInfoBoxAberto) == 'number' && typeof (infoBox[idInfoBoxAberto]) == 'object') {
            infoBox[idInfoBoxAberto].close();
        }

        infoBox[id].open(map, marker);
        idInfoBoxAberto = id;
    }

    function carregarPontos_contato() {
        $.getJSON('app/pontos.json', function (pontos) {
            var latlngbounds = new google.maps.LatLngBounds();
            $.each(pontos, function (index, ponto) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                    icon: 'app/template/img/icone_mapa.png'
                });
                var myOptions = {
                    content: "\
                                                        <br>\n\
                                                        <img class=\"img-responsive\" alt=\"matriz\" ng-src=\"app/template/img/img_matiz.png\" src=\"app/template/img/img_matiz.png\">\n\
                                                        <h1> Matriz </h1>\n\
                                                        <p>49 34441 1111<br>\n\
                                                           Rua Dr. Maruri, 1677 - Centro<br>\n\
                                                           89700-000 - Concórdia - SC</p>\n\
                                                        <br>",
                    pixelOffset: new google.maps.Size(-150, 0)
                };
                infoBox[ponto.Id] = new InfoBox(myOptions);
                infoBox[ponto.Id].marker = marker;
                infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                    abrirInfoBox(ponto.Id, marker);
                });
                markers.push(marker);
                latlngbounds.extend(marker.position);

            });
            var markerCluster = new MarkerClusterer(map, markers);
            map.fitBounds(latlngbounds);
        });
    }
    initialize_contato();

e também colocando o código do mapa nos controllers de todas as telas em que o mapa tem que aparecer, e não só no controller principal

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .