API de Google Map para aplicaciones Ionic
LA SITUACIÓN:
Necesito incluir un mapa de Google dentro de mi aplicación de Ionic.
- ¿Hay algún evento javascript disparado cuando se abre el teclado en pantalla en safari móvil o cromo?
- HTML5 Audio no puede reproducir JavaScript a menos que se active manualmente una vez
- Cámara de Córdoba PictureSourceType PHOTOLIBRARY v SAVEDPHOTOALBUM
- Cómo obtener los errores de la consola del navegador en Android-Phonegap-app, posiblemente en Eclipse?
- La aplicación Android PhoneGap no clasifica el contenido de forma equivalente a la página de Chrome / navegador
CONFIGURACIÓN DEL MAPA:
Para probarlo he hecho los siguientes pasos:
- Registro en el desarrollador de Google Console
- Habilitar la API JavaScript de Google Maps
- Obtener clave de API como tecla del navegador
-
Agregue el script a index.html:
<script src="http://maps.google.com/maps/api/js?key=MY_API_KEY&sensor=true"></script>
-
Crear un mapa div y css relacionados:
<div id="map" data-tap-disabled="true"></div> #map { width: 100%; height: 100%; }
-
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:
- ¿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?
- ¿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!!
- Tamaño del elemento de configuración del navegador de Android demasiado pequeño
- Cómo agregar animaciones personalizadas en Google Map V3 Marker cuando suelto cada marcador uno por uno?
- Práctica recomendada para la autorización / acción de Facebook en dispositivos móviles sin complementos
- Chartv Donut desaparece
- Cómo arreglar "Falta un arrastre mientras esperamos la respuesta de WebCore para tocar hacia abajo"
- Android - Cómo ejecutar la intención de JavaScript
- No se pudo encontrar la herramienta "aapt"! Es posible que deba actualizar su SDK de Android, incluidas las herramientas de plataforma
- El lienzo de Android se congela
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.
-
Configuración del Dev -> Permitir que se muestren simulaciones de ubicación
-
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>
- ¿Cómo se exportan los elementos extraíbles del vector XML de Android a otro formato?
- Android: ¿Cómo puedo crear una vista de pila deslizable?