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>
setTimeout
por$timeout
(sem esquecer de fazer a injeção no controller) ?