1

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:

introducir la descripción de la imagen aquí

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/32090622/how-use-initial-google-map-in-angularjs-controller/38191188

https://stackoverflow.com/questions/30335835/how-does-the-google-maps-api-work-with-angularjs?rq=1

y algunas variaciones realizadas por mi.

7
  • ¿Has intentado darle una altura en pixels?
    – fredyfx
    el 10 jul. 2019 a las 0:25
  • Si lo he intentado, tambien en otras unidades de medida como em, vh, etc
    – Macali
    el 10 jul. 2019 a las 0:45
  • 1
    ¿En qué momento llamas a la función initMap?
    – fredyfx
    el 10 jul. 2019 a las 0:54
  • Con el callback del script de google. En tiempos de ejecución T0 carga el html, T1 scripts, etc T2 el callback. Tambien usé un ng-init="initMap()" porque tambien llegue a pensar que no se ejecutaba la función pero tampoco hubo caso
    – Macali
    el 10 jul. 2019 a las 1:15
  • Efectivamente no estaba llamando a la funcion... asique agregue al final de la funcion initMap ´initMap();´ para que se auto ejecute al cargar el controlador. pero ahora me dice que " angular.js:15567 ReferenceError: google is not defined at initMap (mapController.js:10) "
    – Macali
    el 10 jul. 2019 a las 1:37

1 respuesta 1

1

Finalmente lo que hice para solucionar fue mover el script con la API Key de google a mi estado padre en index.html y borrar el parametro &callback=initMap que viene por defecto porque me daba un error de Promise ya que aun no estaba cargado el controlador que contiene la función initMap().

Luego me di cuenta que function initMap no aparecía en el scope de mi estado en map.html y lo cambie por $scope.initMap = function() {...}. Luego desde mi estado map hice lo siguiente.

<div ng-controller="mapCtrl">
    <div id="map" style="display: flex;">
        <button ng-click="initMap()" style="margin: auto;">Activar mapa</button>
    </div>
</div>

Entonces al presionar sobre mi botón "Activar mapa" llamo a la función initMap(); que ahora si se encuentra en el scope.

Si a alguien le interesa que el mapa se ejecute inmediatamente se carga el estado o la página. pueden utilizar <div ng-init="initMap()"></div> de esta manera al cargarse este fragmento de código en el DOM se debería ejecutar el mapa.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.