Ionic práctico: App con REST

Añadir el mapa de Google a nuestra aplicación

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Otra tarea distinta será conseguir que se cargue el SDK de Google para la creación de mapas. Veremos en este vídeo la estrategia que hemos seguido para la carga de esta API y cómo añadirla a nuestra aplicación

Transcripción

Voy a cargar el mapa de Google, para ello necesito primero trabajar sobre el constructor o sobre IonViewDidLoad dependiendo en realidad debería de trabajar sobre este método, lo que pasa es que en mi caso se va a cargar independientemente, o sea, se va a cargar todas las veces, así que me va a dar igual donde lo ponga. Lo voy a cargar dentro del constructor para tener el código un poco más agrupado. Y lo primero que necesito es saber si efectivamente ese Script se ha cargado previamente o no. Y para poder saberlo, puedo utilizar las variables globales, así que puedo preguntar que en caso de que en las variables globales me diga Get Script Loaded, que ese Script no haya sido cargado, y solo en ese caso, entonces aquí ya me voy a ocupar de la carga de ese Script. Voy a crear una variable Script a la que voy a igualar al Document.CreateElement, y dentro de ese CreateElement voy a pasar un nuevo parámetro que crée un nuevo Script, o sea, crearé una nueva etiqueta Script. A ese Script le tengo que añadir una ruta de donde tengo que sacar la API de Google Maps así que voy a pedirle a ese Script que se modifique su atributo SRC y sobre él le voy a pegar la API y además le voy a pasar con una Key en concreto. Y luego, por último, pues nada, necesito hacer que cuando esto esté listo, pues el Document.Head que tenga un AppendChild, y en ese AppendChild voy a añadir ese elemento, básicamente, entonces le digo Document.Head.AppenChild, y le voy a pasar ese Script. Esto sirve para cargar ese Script, pero no me llega, necesito cargar una cosa más, y es que necesito que una vez que haya sido cargado se ejecute un código en concreto, se ejecute que esto ya no es correcto, quiero decir, el ScriptLoaded tiene que cambiar a verdadero, así que voy a utilizar el método "OnLoad" que lo voy a asociar a una función y dentro de esa función pues efectivamente, cambie el valor de esa variable global. Set Script Loaded, y le voy a pasar el valor verdadero. Gracias a este código, voy a conseguir que esto se cargue una vez y solo una vez, ni una más. Ahora, para poder utilizar ese código que estoy cargando desde la API, necesito también tener acceso a la variable Google, y como estoy trabajando con TypeScript, me va a dar errores si no declaro esa variable, así que voy a declarar esa variable Google, y le voy a dar de valor cualquiera posible. Vale, ya está declarado, y podría ya crear el mapa. Para crear el mapa, bueno, puedo hacer una función que abra ese mapa. En realidad no me interesa que se carguen todos los mapas sobre todas las diapositivas. Más bien, lo que voy a hacer es añadir un botón que cuando haga clic sobre él, se encargue de la carga de ese mapa. De todas formas, antes de añadir el botón, voy a guardar todo mi trabajo, voy a pasarme al compilador y voy a asegurarme de que esté todo correcto. Aquí se ve que efectivamente en la línea 48... voy a volver atras, me está dando un error en esta línea y eso es debido a este This, este This que hace referencia sobre esta función en concreto, así que voy a tener que crear una variable, un "__This" y voy a utilizarla para hacer que así, este VarsGlobales se asocie directamente a este VarsGlobales. Lo guardaré y ahora el compilador debería no dar ningún error. No está compilando, voy a guardar... Y ahora sí está leyendo, y parece que sí, ahora ya ha pasado la fase de depuración y efectivamente ahora lanzará correctamente la aplicación, aunque no se va a notar ninguna diferencia, porque lo único que habrá ocurrido es que se habrá añadido ese Script de Google al final de la página.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.