Ya que podemos almacenar y usar la información en Firebase, ahora vamos a agregar un nuevo método que nos va a permitir obtener las coordenadas geográficas de una dirección que ingresemos y almacenar la información en Firebase.
El enlace del json es:
http://maps.google.com/maps/api/geocode/xml?address=**78-43+diagonal+70f,+Bogota,Colombia**
Lo que te muestro resaltado en negrita es la dirección de la que quieres obtener la información.
Yohangel Andres Ramos Quiñones
Solo por si a alguien le sucede lo mismo, me daba error en la parte de obtener el json, copie el link de la descripción directo desde el inspector y no me fije, dice xml en vez de json, cambiando eso les funcionara!
Santiago Ricci
Muchas Gracias por tu aporte, cometí el mismo error y al cambiarlo funciono!!
Saludos
Miguel Angel Goda Molina
muchas gracias por el dato
Isaac Villatoro
manuel atenas atenas
XAVIER MALDONADO
porque ahora se utiliza HttpClient en lugar de Http?
que diferencia hay???
Es verdad que Udemy tiene mas contenido actualizado (y que los docentes constantemente están actualizando los cursos) pero Platzi tiene una comunidad muy grande y activa (hace 2 semanas que estoy en Platzi y tengo mucho tiempo usando Udemy) y en base a esa comunidad digamos que se actualizan los contenidos. Pienso que no hay plataforma perfecta (Platzi, Udemy, Crehana, EDteam, etc) todas tienen sus pro y sus contras. Será cuestión de tomar lo que mas te convenga. Por ahora encontre no solo respuestas a los ejercicios de los cursos sino también ideas nuevas que aportan los estudiantes. Si udemy logra potenciar la participación de la comunidad creo que va a terminar por hacer desaparecer la competencia.
Greivin Fonseca
Edison Arley Plaza Marin
Usar este enlace, el de la descripción esta en xml.
Yangetze González
Company_adminExcelente! Esto estaba dando error… Gracias por el detalle!
carlos Alberto Bedoya Ramirez
Definitivamente, no he podido usar el mapa ni nada que tenga que ver con el, por que no actualizan el curso ni ofrecen una dirección de correo a donde escribir.
MUY TRISTE
Joonik SAS
Hola, pude hacerlo leyendo la documentación en y compara el ejemplo de la clase con una dirección buscada por ti mismo en y usa este formato ingresando la dirección buscada por ti.
y usa el API Key que generamos anteriormente. Como tip te diré que usa la dirección despues del “addresss=” hasta la sección que incluye tu estado/región/departamento/provincia y pegala antes del “&key” sin comas ni espacios. Exitos!
Usuario anónimo
UserUsuario anónimo
UserEsta es la nueva forma.
Miguel Fernando Urquijo Gómez
un crack gracias
VICTOR JUAREZ PALAFOX
La nueva forma de usarlo es mediante la api que está en:
Sin olvidar activar en:
La opción de Geocoding API
VICTOR JUAREZ PALAFOX
Abraham Lopez
Eduardo de la Cruz Ibarra
ProfesorGenial! Muchas gracias por compartir
XAVIER MALDONADO
que diferencia hay entre Http y HttpClient?
alguien dijo que ahora se usa el HttpClient
Alejandro Estupiñan
Que ahora se llama HttpClient angular mete nuevas librerias cada semana
Onasis Gonzalo Soto Castro
Para los que tiene problema con que no existe o encuentra el atributo results , deben crear una interface y dentro un atributo llamado results:any…
Vale aclarar que esto se explica en el video llamado Release de Angular 5
y también en la documentación:
Diego Mendoza
A mi me ha funcionado como dice pero sin el results…
this.lugar.lat = result[0].geometry.location.lat;
this.lugar.lng = result[0].geometry.location.lng;
Felipe de Jesús Víctor Arceo
Luis Vargas
Edgar Moises Valdez Faria
Como tienes definido este método en el servicio “obtenerGeoData”.
Puede que no hayas importado http correctamente
O puede que hayas definido tu método de esta forma:
obtenerGeoData(direccion): void { ..... }
Edison Arley Plaza Marin
Tengo un problema similar…
Wilson Fabian Pérez Sucuzhañay
Isaí Ramírez
Este fue la solución a mi problema, muchas gracias 😃
Roger Abarca
Gracias me funciono perfectamente :D
Christopher Federico Ulloa Montenegro
Seria genial si actualizaran o hicieran un nuevo curso de Angular 7.
Rodolfo Sáenz
A ver, tengo este problema:
error_message: "You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account"
Tanto para el mapa y la geolocalización.
En cuotas de la consola de google me aparece que sólo tengo 1 request diaro. ¿?¿?!!! Me pide facturación 😦
Rodolfo Sáenz
Rodolfo Sáenz
A partir del 11 de junio del 2018, necesitarás una clave de API válida y una cuenta de facturación para acceder a nuestras API. Cuando habilites la facturación, recibirás un crédito mensual gratuito de 200 $ para usar en Maps, Routes o Places. Actualmente, la mayoría de los millones de usuarios que utilizan nuestras API pueden seguir usando Google Maps Platform de forma gratuita con este crédito.
Miguel Fernando Urquijo Gómez
A tener en cuenta! en suscribe hay que decirle que es de tipo any:
.subscribe((result:any) => {
Noelia Iglesias Martínez
Creo que a alguien le servirá. Cuando obtengáis la API Key acordaros de activarla para Geocoding, yo no lo tenía, y como si tenía el JavaScript veía bien el mapa y no entendía por qué no funcionaba para sacar las coordenadas. Además para probar uso Postman , es un software para hacer peticiones get o post, entre otras, y poner los parámetros que tu aplicación requiera y ver los resultados en json, xml... Me ayudó mucho en esto. Saludos!!!
Maria de los Angeles Silva Gutierrez
tengo un problema crear.component.ts this.lugaresService.getLugares().obtenerGeoData(direccion).valueChanges().subscribe(result =>{ this.lugaresService.getLugares().valueChanges().subscribe(result =>{ //debugger; //para detener la corrida this.lugar.lat = 0; this.lugar.lng = 0; this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado con Éxito!'); this.lugar = {}; }); pero en la terminal me da este error: ERROR in src/app/crear/crear.component.ts(20,42): error TS2339: Property 'obtenerGeoData' does not exist on type 'AngularFireList<{}>'.
Diego Forero
Team PlatziPuedes compartir tu archivo crear.component.ts completo para mirar si falta algún import. Una pregunta, estas usando las mismas versiones de las librerías que se usan en el curso, por ser Angular 4, si instalas versiones actualizadas Angular 7 es probable que muchas cosas no funcionen.
Efraín Girón Romero
Creo que es porque estas llamando a la función "obtenerGeoData(direccion)" del resultado de la función "getLugares()" y no directamente del servicio de lugares.
Prueba quitar esta parte:
this.lugaresService.++getLugares()++.obtenerGeoData(direccion).....
Y que quede así:
this.lugaresService.obtenerGeoData(direccion).....
Maria de los Angeles Silva Gutierrez
tengo un problema con mi mapa "This API project is not authorized to use this API.", intente subir el archivo json por ftp pero me sale en el navegador FTP is not supported.
Diego Forero
Team PlatziHola, primero como estas intentarlo subirlo?, segundo tienes bien configurada tu api key de google maps?
Estoy llevando el curso y ya no se utiliza Http, ahora es necesario utilizar HttpClient. El código sigue siendo muy similar pero el constructor se declara:
class MyService() { constructor(http: HttpClient) {...}
Y necesitamos importar el modulo correspondiente:
@NgModule({ imports: [ BrowserModule, HttpClientModule ],
Por último esta consulta ya nos retorna un array que podemos consultar directamente sin utilizar la función .json():
this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng;
hola tienes el codigo de esto? no he podido sacar los errores,
guardarLugar() { var direccion: string = `${this.lugar.calle},${this.lugar.ciudad},${this.lugar.pais}`; console.log(direccion); this.lugaresService.obtenerGeoData(direccion) .subscribe(result => { this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng; this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado con exito'); this.lugar = {}; }); }``` me dice que results no esta definido
Tuve mucho problema para activar esto de la geolocalizacion , ya que el tema esta muy desactualizado, pero les dejo mi solucion para que puedan avanzar primero ya no se usa el Http, debes importar en lugares.service.ts
<import {HttpClient} from "@angular/common/http";>
en el contructor agregar la variable
<private Http:HttpClient>
Despues el metodo del GeoData
<public obtenerGeoData(direccion){ return this.Http.get('https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyCiGsoFevMN2J-dXWtD_31AN4UkraR4Hq0&address='+ direccion); }>
Ya con eso deberia de funcionar, recordar importar el modulo en app.module.ts
<import { HttpClientModule } from '@angular/common/http';>
Y despues el @ngModel
en los imports
<HttpClientModule>
Solucione: Debes habilitar la opción de Geocoding API https://console.cloud.google.com/google/maps-apis
public obtenerGeoData(direccion){ return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=TU_API_KEY_MAPS&address='+direccion); }
guardarLugar(){ var direccion = this.lugar.calle+','+this.lugar.ciudad+','+this.lugar.pais; this.lugaresService.obtenerGeoData(direccion).subscribe((result: any) =>{ this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng; this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado con exito!'); this.lugar = {}; }); }
Esta es mi solución para el error de “results no existe”, usando el HttpClientModule que mencionan
var direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais; this.lugaresService.obtenerGeoData(direccion) .subscribe((result : any) => { this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng; this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado exitosamente.') this.lugar = {}; });```
También funciona agregando el tipo any al parametro result
this.lugaresService.obtenerGeoData(direccion).subscribe( (result: any)=>{ this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng; this.lugaresService.guardarLugar(this.lugar); alert(this.lugar.nombre + " fue guardado con éxito!"); this.lugar = {}; } );
Hola a todos, oye estoy teniendo este error, estoy 😦 HELP.
/src/app/crear/crear.component.ts (19,14): Property ‘subscribe’ does not exist on type ‘void’.
guardarLugar(){ var direccion = this.lugar.calle + ',' + this.lugar.cuiudad+','+ this.lugar.pais; this.lugaresService.obtenerGeoData(direccion) .subscribe((result) => { this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); console.log('esta guardado en firebase'); this.lugar = {}; }) }
Para los que les sale esta warning a la hora de lanzar el ng serve.
ERROR in src/app/crear/crear.component.ts(20,33): error TS2339: Property ‘results’ does not exist on type ‘Object’.
src/app/crear/crear.component.ts(21,33): error TS2339: Property ‘results’ does not exist on type ‘Object’.
se soluciona poniendo any y quitando el .json()
guardarLugar() {
const direccion = this.lugar.calle + ‘,’ + this.lugar.ciudad + ‘,’ + this.lugar.pais;
this.lugaresService.obtenerGeoData(direccion).subscribe((result:any) => {
this.lugar.lat = result.results[0].geometry.location.lat; this.lugar.lng = result.results[0].geometry.location.lng; if (this.id != 'new') { this.lugaresService.guardarLugar(this.lugar); alert('Negocio editado con éxito!'); } else { this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado con éxito!'); this.lugar = {}; } });
}
Según
"
A partir del 11 de junio del 2018, necesitarás una clave de API válida y una cuenta de facturación para acceder a nuestras API. Cuando habilites la facturación, recibirás un crédito mensual gratuito de 200 $ para usar en Maps, Routes o Places. Actualmente, la mayoría de los millones de usuarios que utilizan nuestras API pueden seguir usando Google Maps Platform de forma gratuita con este crédito. Las cuentas de facturación nos ayudan a conocer mejor las necesidades de nuestros desarrolladores y permiten que tu negocio crezca sin problemas.
Para evitar la interrupción del servicio en cualquiera de tus proyectos, visita nuestra página para empezar a crear un proyecto, generar una clave de API y habilitar una cuenta de facturación. Una vez que generes la clave de API, guárdala en un lugar seguro y úsala para actualizar tu aplicación.
"
