0
Hello, I’m trying to initialize the API of Google Maps on controller of my page Angular, only that it simply does not start the function. If I put it directly on the page, it works smoothly. It follows code from 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);
};
Follows HTML code:
<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>
Have you ever tried to replace
setTimeoutfor$timeout(without forgetting to inject the controller) ?– celsomtrindade
I tried now and nothing has changed
– Bernardo Kowacic
It does not even appear the map on the screen? When you say putting directly on the page it works, what did you mean?
– celsomtrindade
When I put the API code right into the file. html, inside the <script> tags, in the place where you have the <div> with ng-init it loads the map normally. With the API code in the controller, it just doesn’t call the map, it’s like there’s nothing there
– Bernardo Kowacic
Have you ever tried calling the independent function of a call from html? For example, instead of having
vm.mapa_localiza_contato = function...call the function directly withinitialize_contato(). Or is your controller being booted into this html page? This may be the problem.– celsomtrindade
As for using the right controller, I think so, because it is the controller of the main page, where my footer is. When calling the function independent of the html call, I tried to open <script> tags and put only the function call, but also did not, I did it as follows: <script>initialize_contact();</script> and it says that it did not find the function
– Bernardo Kowacic
Dude, where’s the ng-controller directive?
– pmargreff
remember to include your controller js file on the page or depending on the situation on a page situated before it.
– pmargreff
So do the following, right at the beginning of your controller, regardless of any function, put this:
console.log('iniciou controller');and see on your console if it will display this message. If it does not, the problem is that your controller is not initializing.– celsomtrindade
@pmargreff ng-controller is not the only way to start a controller, for example I never use it.
– celsomtrindade
the ng controller directive is at the beginning of the html page, in body, and the controller is being called at the bottom of the page
– Bernardo Kowacic
i tried to put a console.log in the main controler and also in the function that calls the map, it appears the console that I wrote in the controler but not what I wrote inside the function
– Bernardo Kowacic
At the end of your controller, remove that code from
vm.mapa_localiza...leave only the 2 functions that are being called inside it, see if the log inside the function will appear.– celsomtrindade
worked, but it is not appearing the menu that should appear in front of the map, and in case I reload the screen, it disappears the map and appears the menu
– Bernardo Kowacic
I was able to solve the problem using the Celsomtrindade answer and also putting the map code in the controllers of all screens where the map has to appear, and not only in the main controller
– Bernardo Kowacic