API de Google Map para aplicaciones Ionic

LA SITUACIÓN:

Necesito incluir un mapa de Google dentro de mi aplicación de Ionic.

CONFIGURACIÓN DEL MAPA:

Para probarlo he hecho los siguientes pasos:

  1. Registro en el desarrollador de Google Console
  2. Habilitar la API JavaScript de Google Maps
  3. Obtener clave de API como tecla del navegador
  4. Agregue el script a index.html:

    <script src="http://maps.google.com/maps/api/js?key=MY_API_KEY&sensor=true"></script> 
  5. Crear un mapa div y css relacionados:

     <div id="map" data-tap-disabled="true"></div> #map { width: 100%; height: 100%; } 
  6. Haga un mapa básico centrado en la geolocalización del usuario:

     .controller('MapCtrl', function($scope, $state, $cordovaGeolocation) { var options = {timeout: 10000, enableHighAccuracy: true}; $cordovaGeolocation.getCurrentPosition(options).then(function(position){ var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var mapOptions = { center: latLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); }, function(error){ console.log("Could not get location"); }); }); 

LA CUESTIÓN:

Está funcionando bien, pero esto fue para fines de prueba en el navegador. Cuando lo he probado en la aplicación o en el emulador (Genymotion) el mapa ni siquiera se está abriendo. Por supuesto la razón puede ser simple: porque tengo una llave del hojeador.

Pero he intentado otras llaves y no está abriendo de todos modos.

Dado que el código es correcto, las preguntas son:

  1. ¿Qué tipo de mapa de Google tengo que habilitar para tener un mapa de Google en mi aplicación de Ionic que funciona bien para Android e Ios?

¿Es la API JavaScript de Google Maps la opción correcta?

  1. ¿Qué clase de llave tengo que conseguir entre la llave del servidor – la llave del hojeador – la llave androide – la llave de ios? ¿Funciona la tecla del navegador para las aplicaciones nativas?

¡¡Gracias!!

He encontrado una solución usando angular-google-maps .

Siguiendo los pasos básicos en la documentación es suficiente para configurarlo. Funciona en un navegador como una aplicación angular y también en un teléfono como una aplicación híbrida iónica.

Tengo el mismo código de ejemplo con usted, y enfrentan el mismo problema en Genymotion. Resuelvo el problema ajustando algunos ajustes del desarrollador de Genymotion.

  1. Configuración del Dev -> Permitir que se muestren simulaciones de ubicación

  2. Asegúrese de que el GPS esté encendido. Establecer GPS en

Pruebe el siguiente Script-

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&language=en"></script> 
  • Evitar que la barra de direcciones se oculte en los navegadores móviles
  • Phonegap Error - "No se puede leer la propiedad 'captura' de undefined" en Android
  • Cómo vincular tanto Mousedown y Touchstart, pero no responder a ambos? Android, JQuery
  • Menú contextual y dispositivos con pantalla táctil
  • Devoluciones de llamada de Android InAppBrowser _system
  • ¿Cómo puedo generar un apk que se pueda ejecutar sin servidor con react-native?
  • Programmatic haga clic en Android WebView
  • Desactivar el zoom en el enfoque de entrada en la página web de Android
  • Phonegap - automáticamente incluyendo cordova correcto
  • La mejor manera de evitar los efectos del algoritmo Nagle usando webSockets?
  • Configuración del visor para escalar para ajustar tanto el ancho como la altura
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.