Obteniendo coordenadas usando Geocoding

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:45

Obteniendo coordenadas usando Geocoding

Curso de Angular 4

Clase 37 de 80

Clase 37 / 80

Recursos

Rodolfo Sáenz

Hace 8 años

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

Hace 8 años

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.

Rodolfo Sáenz

Hace 8 años

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.

Comentarios (69)69 comentarios

Yohangel Andres Ramos Quiñones

Hace 9 años

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

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;

manuel atenas atenas

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

XAVIER MALDONADO

porque ahora se utiliza HttpClient en lugar de Http?
que diferencia hay???

Jhon Castrillon

Estos cursos se DEBEN ACTUALIZAR!!!

Carlos Pozo

Siempre es lo mismo, no actualizan los cursos y no sirve de nada toca estar viendo en los comentarios o buscando por otros lados. Aprendan de Udemy ellos actualizan super bien el contenido, tienen profesionales de planta y no solo una visita de fin de semana para grabar.

Pilas con esto porque es verdad

Misael Peloc

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

Hace 7 años

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>

Edison Arley Plaza Marin

Usar este enlace, el de la descripción esta en xml.

Yangetze González

Company_admin

Excelente! 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

User

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 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

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 = {};
      });```

Abraham Lopez

Realice unos cambios,como pueden ver.

Eduardo de la Cruz Ibarra

Profesor

Genial! Muchas gracias por compartir

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

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 = {};
      }
 );

Luis Vargas

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 = {};
            })
        
    }

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 {
	.....
}

Tengo un problema similar…

Wilson Fabian Pérez Sucuzhañay

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 = {};
    }


  });

}

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.

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 Platzi

Puedes 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).....

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.

Hola, primero como estas intentarlo subirlo?, segundo tienes bien configurada tu api key de google maps?

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina