--- title: "Integrar mapas en aplicaciones móviles" date: "2019-07-17" categories: - "app-development" - "mobile" - "mobile-development" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "web-services" description: Es fácil integrar mapas en aplicaciones móviles utilizando MobileTogether, que incluye funciones de geolocalización personalizadas y marcadores interactivos para mejorar la experiencia del usuario. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #web-services Categories: [mobile-development](/blog/es/category/mobile-development.md) | [mobile-development](/blog/es/category/mobile-development.md) | [mobile-development](/blog/es/category/mobile-development.md) # Integrar mapas en aplicaciones móviles Los desarrolladores pueden crear aplicaciones basadas en la ubicación altamente personalizadas, aprovechando las funciones de geolocalización de los dispositivos móviles. Ahora, MobileTogether, la [herramienta de desarrollo móvil multiplataforma y de bajo código](https://www.altova.com/es/mobiletogether) de Altova, permite una integración profunda de mapas en las aplicaciones para todas las plataformas móviles populares. Los desarrolladores pueden integrar mapas en aplicaciones móviles, añadir marcadores personalizados y definir acciones específicas que se activen al hacer clic en el mapa. Por ejemplo, una empresa podría querer que una aplicación incluya un mapa con la ubicación de todas sus sucursales, y que al hacer clic en una sucursal, se muestre el inventario actual. En una publicación anterior, describimos una aplicación móvil diseñada para permitir a los usuarios verificar el estado de los principales aeropuertos de Estados Unidos, seleccionando un código de aeropuerto de una lista desplegable. Una técnica alternativa sería reemplazar las 47 opciones de la lista desplegable con marcadores en un mapa. Analicemos este ejemplo. ![](/blog/images/airport_700x335.jpg) Las capturas de pantalla que se muestran a continuación ilustran la nueva aplicación "Estado del Aeropuerto" funcionando en un teléfono Android, un iPhone y como una aplicación de escritorio para Windows. [![Integrar mapas en aplicaciones móviles, con compatibilidad multiplataforma](/blog/images/cross-platform-view.png)](cross-platform-view.png) En cada dispositivo, el mapa se genera utilizando la aplicación de mapas nativa e integrada. Los usuarios finales verán automáticamente el estilo y el formato habitual en cada plataforma. Si el mapa desplaza alguna información del estado al borde inferior de la pantalla, esta se puede visualizar mediante el desplazamiento vertical [![Integre mapas en aplicaciones móviles con desplazamiento vertical para poder visualizar la información completa](/blog/images/scroll-view-android.png)](scroll-view-android.png) Integre mapas en aplicaciones móviles arrastrando el control del mapa a la aplicación, utilizando la funcionalidad de diseño visual de MobileTogether Designer. Puede personalizar las propiedades de cada mapa. La captura de pantalla que se muestra a continuación muestra una parte de nuestra página principal de estado del aeropuerto, con la ventana de ayuda de las propiedades del mapa a la derecha. [![Integre mapas en aplicaciones móviles utilizando la herramienta visual MobileTogether Designer](/blog/images/design-view.png)](design-view.png) Los tipos de mapas disponibles son: mapa de calles, satélite o híbrido. Además de los controles de zoom opcionales, todos los dispositivos con pantalla táctil permiten desplazarse por el mapa con un dedo y utilizar el gesto de pellizcar con dos dedos para ampliar o reducir la imagen. El área del mapa que se mostrará se basa en una lista de uno o varios marcadores, definidos mediante la expresión "mt-geo-map-marker". Cada marcador incluye campos de identificación, título y texto. Estos valores pueden recuperarse cuando se hace clic en el marcador. [![Integre mapas en aplicaciones móviles utilizando marcadores de mapa personalizados](/blog/images/map-markers.png)](map-markers.png) Los colores de los marcadores pueden ser nombres estándar, como rojo, verde y azul, o pueden especificarse mediante códigos de color personalizados, como los que utilizamos anteriormente. La propiedad "Viewport" define el área total que se va a representar mediante la especificación de las coordenadas de las esquinas superior izquierda e inferior derecha del mapa. Si se deja en blanco, el "Viewport" predeterminado incluirá todos los marcadores definidos, además de un pequeño margen. Definimos una expresión para el "Viewport" con valores iniciales para gran parte de Norteamérica. [![Expresión de la vista para establecer el nivel de zoom del mapa](/blog/images/viewport-expression.png)](viewport-expression.png) La propiedad "Acción de control" define qué ocurre cuando el usuario hace clic en cualquier marcador del mapa. Nuestra aplicación leerá el título del marcador, que es un código de aeropuerto de tres letras, utilizará ese código para obtener el estado del aeropuerto del servicio web de la FAA y actualizará la pantalla. Nuestra aplicación calcula nuevas coordenadas de la ventana de visualización para ampliar la vista y mostrar la ubicación del aeropuerto seleccionado [![Nivel de zoom personalizado basado en la expresión del área de visualización](/blog/images/map_zoom-541x1030.png)](map_zoom.png) Descubre por ti mismo lo fácil que es integrar mapas en aplicaciones móviles. Descarga el [MobileTogether Designer, que es de uso gratuito](https://www.altova.com/es/mobiletogether/download) y que incluye ayuda en línea y aplicaciones de ejemplo. También puedes obtener nuestra [aplicación "Estado del aeropuerto" en GitHub](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) y ejecutarla directamente en el Designer o como una prueba en tu propio dispositivo móvil. Descubra otras aplicaciones creadas con MobileTogether y vea demostraciones en video en: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/es/mobiletogether/demos)