ios - example - ionic google maps marker

Ionic v1: los mapas de Google no se cargan inicialmente en iOS

Question

Tengo un problema realmente extraño, que comenzó a ocurrir hace una semana.

Tengo una aplicación viónica v1, que usa mapas de Google (no un complemento de Córdova, sino la versión web de Google Maps), y estos mapas se abren de manera modal y siempre han funcionado (al menos durante dos años).

El código JS que tengo actualmente es el siguiente

$scope.pickup_map = {
    center: item.location,
    zoom: 14,
    control: pickupMapControl,
    mapOptions: {
        draggable: true,
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    }
}

Y luego en el método openModal:

$timeout(
    () => {
        const map = pickupMapControl.getGMap()
        map.setCenter(new google.maps.LatLng(item.location.latitude, item.location.longitude))
        google.maps.event.trigger(map, ''resize'')
    },
    100
)

En el html tengo:

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;libraries=places&amp;key=AIzaSyAUKvpku-JhbniZY80NLq_A2Ejgk_b_lUc&amp;v=3.31" async></script>

y

<ion-modal-view>
  <ion-header-bar class="bar-calm">
    <h1 class="title">Pick-up Location</h1>
    <div class="button button-clear" ng-click="closeMapViewer()"><span class="icon ion-close"></span></div>
  </ion-header-bar>

  <ion-content class="pickup-location-viewer">
    <ui-gmap-google-map 
      center="pickup_map.center" 
      zoom="pickup_map.zoom" 
      control="pickup_map.control" 
      options="pickup_map.mapOptions" 
      draggable="true" 
      data-tap-disabled="true"
      ng-if="pickup_map.control"
    >
      <ui-gmap-circle center="marker.position" stroke="marker.stroke" fill="marker.fill" radius="marker.radius"></ui-gmap-circle>
      <ui-gmap-marker coords="userPosition" icon="{ url: ''img/user-pos-icon.png'' }" idKey="user"></ui-gmap-marker>
    </ui-gmap-google-map>
  </ion-content>
</ion-modal-view>

Esto funciona perfectamente bien tanto en Chrome como en Safari (en el navegador de escritorio), así como en dispositivos Android.

Mi captura de pantalla de iOS se ve así:

Agregué específicamente la captura de pantalla porque sé que muchas personas tienen la experiencia de que el logotipo de Google, etc. aparece en la parte inferior, pero no sucede en este caso.

Lo realmente extraño es que el mapa se mostrará si lo amplío o lo muevo ligeramente, sin embargo, configurar el zoom o centrar el mapa programáticamente después no hace nada.

He revisado las llamadas de red y puedo ver que en iOS, inicialmente no se envían llamadas de API a Google hasta que muevo el mapa, mientras que, en la web y en Android, definitivamente se envían al abrir el modal. Por lo tanto, parece que el problema es que, por cualquier motivo, no se está inicializando correctamente en iOS, aunque como se mencionó, nada en el código base se ha cambiado recientemente.

Me doy cuenta de que actualmente la última versión estable de google maps es v3.34 y sigo usando v3.31, pero pruebo con cada versión incremental hasta v3.35 y nada de eso hizo una diferencia.

Además, pero no es tan importante que faltan los controles de zoom solo en iOS, quizás sea un problema relacionado, aunque ni siquiera se muestran una vez que el mapa realmente comienza a mostrarse.

Cualquier sugerencia para este problema sería apreciada!

Answer 1

Supongo que hay 3 soluciones para solucionarlo :

1. Eliminar el Ionic y volver a instalarlo.

Compruebe si su código tiene las siguientes cadenas:

platform.ready().then(() => {
    this.loadMap();
});

Mire esta útil discusión de GitHub: la página de Google Maps de Ionic está en blanco # 1573.

2. Además, este problema se produce cuando el SDK de Google Maps no está habilitado para su clave API. Para habilitarlo, abra su consola de desarrollador en https://console.developers.google.com . Necesita una clave de API válida .

En el panel izquierdo, seleccione Library . Seleccione Google Map SDK para iOS bajo el encabezado de las API de Google y elija Enable API .

3. No cambie el tamaño de su mapa dentro de una función init , no tiene sentido. Debes inicializar el mapa una vez la primera vez que lo estés viendo. Cualquier alteración debe estar separada de la inicialización, así como el resize event . El resize event debe ocurrir después de que su mapa se haya inicializado y no en el proceso en sí.

   var map = ...; // map initialisation
   
   google.maps.event.addDomListener(window, "resize", function() {
       var center = map.getCenter();
       google.maps.event.trigger(map, "resize");
       map.setCenter(center); 
   });

Answer 2

El mapa gris a menudo significa que su clave de API no permite utilizar el Mapa iOS. Por lo tanto, asegúrese de habilitar la habilitación de google maps android api v2 y sdk de google maps para ios ANTES de generar la clave API.

Debe generar la clave API para la aplicación (no para el navegador o el servidor).

Entonces, es posible usar la misma API para iOS y Android.

Como mencionas que esto no funciona, asegúrate de que la etiqueta del script esté entre la cabeza y el cuerpo.

Si esto también se hace bien, siga los siguientes pasos para la solución de problemas: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

Si aún recibe el error, hágamelo saber y lo veré de nuevo.