Buenas estoy tratando de implementar un mapa de la Javascript google maps API pero con AngularJS.
El problema es que en la página que debería aparecer el mapa no aparece. Y la consola de google no me devuelve ningún error, incluso los logs para verificar que se esten alcanzando los controladores y ejecutando el código se imprimen.
Archivos:
mapController.js
, styles.css
, map.html
en este orden.
var app = angular.module('app',['ui.router']);
app.controller('mapCtrl', ['$scope','$rootScope', '$state', function ($scope, $rootScope, $state){
console.log("carga mapCtrl al principio");
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
/** agregue esto 09/07/2019 22:39 para que se ejecute la funcion al cargarse el controlador**/
initMap();
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
console.log("carga mapCtrl al final");
}]);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: lightgrey;
}
#map {
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="app">
<head>
</head>
<body>
<h1> deberia aparecer el mapa...</h1>
<div ng-controller="mapCtrl" id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MI-API-KEY&callback=initMap"></script>
</body>
</html>
si miro la consola de google veo lo siguiente:
Otras aclaraciones: Aquí he simplificado código a solo los archivos que comprenden el funcionamiento del mapa. Pero vale destacar que el div id map, Se encuentra en un archivo app.html
que se ejecuta dentro index.html
a través de un controlador de estados ui-router
. De igual manera desde el login y hasta donde debería ejecutarse el mapa no se muestra ningun error en la consola de google.
Gracias
PD: Cosas que he intentado:
https://stackoverflow.com/questions/46738512/angularjs-google-map-api-integration
https://stackoverflow.com/questions/30335835/how-does-the-google-maps-api-work-with-angularjs?rq=1
y algunas variaciones realizadas por mi.