Mostrar markers con Google Maps + Ionic + Angular
HTML-код
- Опубликовано: 16 окт 2024
- En este video logramos crear un app en Ionic + Angular e integrar Google Maps para mostrar varios markers.
Links:
Steps: bit.ly/394hT9w
Mis redes:
Github:github.com/nic...
Twitter: / nicobytes
Facebook: nicobytes
WebSite: nicobytes.com
Amigo, eres un crack. Pasa muchas veces que los programadores que hacen videos en Internet, pasan por alto decir muchas cosas. Por ejemplo, el detallito de decir: si no le pones dimensiones al mapa no se muestra, eso, es algo importantísimo pero que no se dicen en otros videos. De verdad, muchas gracias, eres un titán.
Muchas gracias por tu comentario y si esos detalles son importantes
Videazo carnal! Gran trabajo! No lo usé para desarrollo móvil sino web en Angular 9 y corre de maravilla, me ayudaste a entender mucho como funciona la API, suscribida inmediata y ojalá llegues muy lejos!
lo hiciste con capacitor o cordova?
@@gearxinc554 mmm el proyecto es web, el build lo hago con el propio cli de angular :/
Hola nbytes muchas gracias por este excelente tutorial, un bn regalo de navidad, te agradezco por estos aportes y felicidades por ganar en Angular Vs React...
Gracias a ti por ver el video y si fue muy bueno ganar el reto Angular VS React fue bastante emocionante.
Hola Nico, muchas gracias por el video, una duda, ¿esta libreria (SDK)coentiene todas las funciones básicas del map (Agregar origen, destino, mostrar la mejor ruta e indicaciones para llegar) ? ¿o sólo muestra el mapa con una dirección predefinida?
Aún funciona en cuarentena ... Muchas gracias.
Muchas gracias por el tutorial
Muchas gracias por el tutorial !!! Muy bueno explicando los conceptos
Hola Nico, muchas gracias por este excelente tutorial!
genial , me ayudo bastante aunque note que los KML la info con este método la ventana de información y el texto lo pone en blanco, como se solucionaria?
LLegaste para salvar mi navidad Jajajaj Gracias muy buena explicación...
Wow que bien que te haya servido, feliz navidad!
excelente, podes explicar la compilacion con capacitor y como cargar la app en el celular
Feliz año nuevo
Hola! claro en los próximos videos trataré el tema de capacitor con mayor profundidad.
NICOBYTES UNA PREGUNTA,
A los marcadores se les puede hacer drag and drop? utilizando google maps js y no en google maps nativo.
Hola Nico, gracias por tus grandes aportes. Tengo una consulta, como puedo optimizar el renderizado de marcadores en mi mapa? tengo una aplicación que carga lento por el renderizado del mapa y sus marcadores.
Hola Nicolas, muy bueno el tutorial. Se puede agregar info windows para ver mas informacion onclick? Gracias!
Hola, Nico! Muchas gracias por todos tus aportes! Podrías hacer algún vídeo de cómo conectar los servicios con los componentes, todo mediante observables? Saludos!!!
Hola, si claro creo que refieres al patrón de Smart and Dumb Components y es un tema que he querido hablar.
Hola cómo conectaste tu celular android a ionic en mac ? He tenido muchos problemas tratando de simular android y ahora me gustaría intentarlo con el celular físico como tú lo haces en el video.. xfavor puedes darme indicaciones 🙏🏻
Gracias por tu video amigo, ¿si yo quisiera que en el centro del mapa se viera un marker diferente para señalizar que ahí estoy yo como podría hacerlo? Pretendo que las coordenadas en las que se centra el mapa cambien en función de mi gps
Hola Nico gracias muy buen vídeo, podrías ayudar con Background Geolocation Ionic capacitor, o me recomiendas algún tutorial
Excelente como siempre en tus explicaciones. Gracias !!
Que versión de Ionic utilizaste ?
Esa es la versión 5, en la 6 aún funciona perfecto.
Hola Nicolas, Excelente tutorial, sin embargo tienes algún video donde yo coloque una dirección (ej: Cra 15 # 20-45) de Colombia y la busque en el mapa de google maps?
Si es sobre predicciones esto te puede ayudar
developers.google.com/maps/documentation/javascript/examples/places-queryprediction
Lo correcto seria implementar un searchbar con autocomplete y el api busca parecidos segun ingreses, pero creo que al utilizar esta api si te cobra, pero muy poco.
habrá una forma de colocar los marcadores de forma dinámica, como por ejemplo , al dar click en determinado punto cree un marcador con la lat y lng de ese punto? Gracias de antemano, muy buen video.
Sipi, al iniciar el mapa puedes usar el map.addListener con el evento click, ese te trae las coordenadas, con esas coordenadas llamas al metodo addMarker para hacerlo de manera dinamica.
Hola Nico muchas gracias por estos videos, me ayudó mucho para mi Tesis.
Me gustaría que nos enseñaras como usar AdMob con capacitor, no lo he logrado.
Excelente video bro, pero tengo un problema, seguí los mismos pasos pero el mapa me muestra totalmente en blanco en la versión de iOS! Que crees que sea ?
Muy bueno el video nicobytes como puedo implementar el trazo de rutas de un marker inicio y un marker final con el plugin de google map en ionic?
Puedes usar el Line de Google Maps o si quieres una ruta optima puedes usar Google Directions API => ruclips.net/video/U8lgiEDmkv8/видео.html
Hola Nico, una pregunta tal vez algo tonta, pero este ejercicio que tu realizas puede implementarse de igual manera en un proyecto web de Angular?
Si claro, como tal use componentes de Ionic pero lo puedes cambiar por tus componentes de tu app y yap!
Gracias amigo...
Cool que mostraras todo el proceso de sacar la api
tengo en la pagina home un boton donde captuto la posicion actual, la pregunta es, como hago para que cada vez que hago click estas posiciones se guarden en un array y muestre en el mapa
map tiene un evento llamado "addListener" con el cual puedes escuchar el evento "click" una vez le das click o tap guardas esa ubicación en un array y se la pasas al método addMarker para añadir el marcador
Hola Nico, muchas gracias por tu aporte. Te queria consultar si tienes algun video sobre como implementer los Markers Clusterer? Gracias!
Hola! no tengo un video asociando pero me parece un buen tema voy a subirlo en los próximos videos.
@@nicobytes Muchas gracias nico!
@nicobytes ¿qué futuro crees que tenga Ionic respecto a flutter? Saludos. 🤓
Es una pregunta bien compleja y esta decisión depende de muchos factores. En el primer video de este canal hable de este tema: ruclips.net/video/3VgCrt1HO_M/видео.html.
Pero creo que poder usar la misma base de código para generar la app de escritorio, mobile y web es muy poderoso.
@@nicobytes Gracias por tu respuesta Nico! se te admira... Saludos.
excelente video podrías hacer un video obteniendo la latitud y longitud desde una api rest
como puedo hacer que cada uno de esos markers sean seleccionables?
Hola muchas gracias, este video me fue de gran ayuda. Hay alguna forma en la cual se pueda interactuar con el panel de indicaciones, en mi caso, no sé si es por mi país, no me muestra el nombre del lugar, su no su dirección.
Por ejemplo busco: Estadio Cibao y se muestra la indicación, pero no el nombre del lugar sino su dirección por ejemplo: Juana Saltitopa 74, Santiago De Los Caballeros 51000.
Y por último, existe una forma de mostrar el precio del servicio, el modo de viaje que uso es el TRANSIT, ya que estoy trabajando con rutas de transporte público.
Gracias
Gracias nicolas.
Hola Nicolas. Gracias por tu video. Tengo una pregunta. Tengo un API que me envía las coordenadas pero no encuentro la manera de pasar ese Array de datos a los markers. No se si me explique bien. Espero puedas ayudarme. Gracias!
Hola! se debería poder pasar estos datos al array sin problema, también depende de como manejes la solicitud si como un promesa (usar async/await) o un observable.
@@nicobytes Gracias Nicolas, pude resolverlo usando promesas. Ahora tengo otra pregunta y estaría muy agradecido si pudieras ayudarme. Como pudiera reflejar los cambios en mi LocalStorage sin tener que refrescar la pagina?
Hi Sir, If I want to restrict the Google API key for iOS with ionic framework how can I do that. If I am restricting the Google API key map is not loading. In case if I am giving restriction to none in Google cloud console then map is loading. Please explain how to restrict the Google API key in Google cloud console.
I saw your Google maps integration video you have used unrestricted API key for map loading. If I want to restrict the Google API key in ionic framework how can I do that.
hola colega, muy buen vídeo, me podrías pasar el link de la documentación? por favor
developers.google.com/maps/documentation?hl=es
excelente muy buena explicación como podría adaptar este código para poder aplicarlo a vue.js podría hacer un ejemplo como aplicarlo a vue.js
no he usando vuejs pero si puedo verlo y hacer un ejemplo de por si he pensado de hacer unos con react
Excelente! Mil Gracias!
De nada, gracias por ver el video y puedes compartirlo a más personas que creas que les interese.
Nico como estas? Yo quiero utilizar el mapa e un ion-tabs como un componente para poder reutilizarlo. Como y donde tendria que cargar el mapa por unica vez? Gracias
Hola! si lo puedes hacer mira aquí en este tutorial crean crean un componente para google maps que lo puedes usar en diferentes paginas: www.joshmorony.com/using-google-maps-and-geolocation-in-ionic-with-capacitor/
O si usas Angular v9 puedes usar el componente que ellos crearon para google maps. github.com/angular/components/tree/master/src/google-maps
Hola, buenas noches. Esta bien explicado tu vídeo; como se haría cuando uno trae los datos desde una base de datos en mysql? esos resultados se retornan en JSON, pero en el metodo renderMarkers( ); al llamarlo desde el loadMap queda indefinido y no muestra los markers. =(
El método addMarkers los añade de manera dinámica, cunado tu api con mysql te traiga el resultado con latitud y longitud guardados llamas al método y pasas como parámetro esos valores.
Estuco genial deberías hacer uno con la versión gratuita open Streep map y leaflet
La verdad no he probado estas versiones y veo que el uso de estas alternativas van en aumento lo voy a ver para futuros videos.
alguien me podria ayudar ? por favos hice todo paso a paso con la key de la api .. lo unico es que el mapa lo estoy haciendo en un segmento y aun asi no se me ve :/
Saludos nico, realice todos los paso como lo haces en tu video, de por cierto muchas gracias por ayudarnos a lograr a aprender esto de maps, sin embargo tengo un problema, y es que esto lo uso para android y cuando lo pruebo en web super bien, pero cuando instalo la app en el movil, el trata de carga el mapa pero se queda en blanco, tambien me funciono en un dispositivo emulado, pero en el real no, podrias ayudarme.
Me ha pasado lo mismo, encontraste solución?
buenas en la parte del metodo para cargar el mapa me aparece const mapEle: que es de tipo null y no se puede asiganr otro elemento, lo mismo en la declaracion de var google; por favor puedes ayudarme en esa parte?
El var google ponle de tipo any y en la parte del metodo en (map) agregale un signo de exclamación quedaria asi (map)!
@@douglasramirez3123 voy a probarlo
Nicolas como se podria crear un metodo para limpiar el mapa o eliminar los markers luego de haberlos mostrado
Hola! tiene que ir por cada marker y ejecutar setMap(null), aquí más doc: developers.google.com/maps/documentation/javascript/markers?hl=es#remove
@@nicobytes Podrias mostrarnos un ejemplo?
existe forma de setear la key en alguna variable global?
Si la puedes poner las variables de entorno y dinámicamente el app.component creas el script que va en el HTML
Hola, de ante mano gracias por tus videos, son exelentes. Me sale lo siguiente: Esta página no puede cargar google Maps correctamente. Carga el mapa pero se ve muy opaco, configuré varias apis de google developer :(
Esto se debe a que el token no tiene permisos adecuados, debes ir a la consola de Google y revisar tu token
THANKSSSSSSSSS.... Muito obrigado mesmoo
Obrigado por assistir os vídeos
Lo implementé, pero sin Ionic y con base de datos, todo funciona de maravilla; sin embargo, tengo problemas con mostrar la ruta desde el punto A al punto B. Y en la consola del navegador me sale el siguiente error:
Map: Expected mapDiv of type Element but was passed null
Si alguien me puede ayudar con eso, se lo agradecería
Parece que el div que le envías a Google Maps para el render esta mal, revisa eso.
No me funciona al pasarlo a mi móvil, usándolo como emulador, hay alguno más de los comentarios que también le pasa, qué puede ser? No sale error
Ahya está! Si cierras y vuelves a abrir la app ya funciona!!!
He bueno en emulador es un poco más demorado también es genial que conectes tu celular y lo veas ahí
@@nicobytes he estado provando y a veces funciona y a veces no cuando lo abro en mi celular, sabes por qué podría ser?
A mi me marca este error: "Esta página no ha cargado Google Maps correctamente. Descubre los detalles técnicos del problema en la consola de JavaScript." Alguien me puede ayudar a que se debe por favor :(
te esta faltando la key de google para poder utilizar google maps
Hola amigo buenas tardes.. te envié un correo mil gracias