Obteniendo coordenadas usando Geocoding

Estos cursos se DEBEN ACTUALIZAR!!!

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

La nueva forma de usarlo es mediante la api que está en:
https://maps.googleapis.com/maps/api/geocode/json?key=YOUR_API_KEY&address=YOUR_DIRECTION
Sin olvidar activar en:
https://console.cloud.google.com/google/maps-apis
La opción de Geocoding API

Seria genial si actualizaran o hicieran un nuevo curso de Angular 7.

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 😦

A tener en cuenta! en suscribe hay que decirle que es de tipo any:

.subscribe((result:any) => {

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

La Key de google maps me exige facturar

Buenas, tengo este error al hacer el resquest, la respuesta es la siguiente:
**Unexpected end of input
**
adjunto el request :

    public obtenerGeoData(direccion)
    {
       return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=AQUI_API_KEY&address='+ direccion);
    }

C[odigo de crear.component.ts :

  guardarLugar() {

    var direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    
    this.lugaresService.obtenerGeoData(direccion)
      .subscribe((result => {

        this.lugar.lat = 0;
        this.lugar.lan = 0;
        this.lugaresService.guardarLugar(this.lugar);
        alert("Se insertaron los datos correctamente");
        this.lugar = {};

      }));
  }

Hola ¿como hago para conocer mi posicion actual?

Result retorna vacío porque la conexión es rechazada , esta documentación del curso está depreciada , la petición llega , pero result retorna:

result = {error_message: "This API project is not authorized to use this API.", results: Array(0), status: "REQUEST_DENIED"}

creo que la única solución real es continuar sin esta funcionalidad y seguir viendo el resto del curso .

Me funcionó así:
crear.component.ts

import { Component } from '@angular/core';
import { LugaresService } from '../services/lugares.service';
import { GeoInterface } from './../interfaces/response-geo-api.interface';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html'
})
export class CrearComponent implements OnInit {
  lugar:any = {};
  constructor(private lugaresService: LugaresService) {
  }
  guardarLugar() {
    var direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    this.lugaresService.obtenerGeoData(direccion)
                       .subscribe((result: GeoInterface) => {
                         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 éxito!');
                        this.lugar = {};
                       });
  }
  ngOnInit() {

  }
}

despues se crea una interface: response-geo-api.interface.ts:

export interface GeoInterface {
    results: any;
}

En lugares.service.ts se modifica la ruta:

public obtenerGeoData(direccion){
        return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=YOUR-KEY&address='+ direccion);
    }

Eso es todo lo estoy usando con la ultima version de Angular (noviembre 2018) y funciona ok. Creditos: recopilacion de los mensajes que escribieron todos jejej

Alguien que me ayude plz, al constructor implemento:

constructor(private afDB: AngularFirestore,private Http: HttpClient){

      }

funcion obtenerGeoData:

public obtenerGeoData(direccion) {
        //https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=
        return this.Http.get()
    }```

pero en el metodo get me dice:

[ts] La propiedad ‘get’ no existe en el tipo ‘HttpClient’.

estaba leyendo la documentacion de Angular pero me dice que aun se ocupa HttpClient.get()

AYUDA PLZ!

Tengo un error cuando pongo **_subscribe _**como que no lo reconoce la palabra. Si alguien me pudiera ayudar por favor.
Gracias.

@Component({
    selector: 'app-crear',
    templateUrl: './crear.component.html'
})
export class CrearComponent {
    lugar:any = {};
    constructor(private lugaresService: LugaresService){

    }
    guardarLugar(){
        var direccion = this.lugar.calle+','+this.lugar.ciudad+','+this.lugar.pais;
        this.lugaresService.obtenerGeoData(direccion);
        .subscribe((result) => {
            debugger;
            this.lugar.lat = 0;
            this.lugar.lng = 0;

            this.lugar.id = Date.now();
            this.lugaresService.guardarLugar(this.lugar);
            alert('Negocio guardado con exito!');
            this.lugar = {};
        });
    }
}```

Qué tal, alguien sabe ¿cómo se agrega un archivo css al proyecto y en qué parte debería ir? bueno, quiero agregar algunos iconos, en este caso de Iconic, según solo debería de usar su archivo css, pero no sé dónde rayos colocar este archivo, ya que al colocarlo en un directorio a nivel de src y lo agrego al array de estilos de angular.json el proyecto no me compila, no sé dónde ni cómo usarlo… alguna idea?

bueno muchachos, asi lo realice y me funciono, para los que posiblemente no encontraron la solucion.

en lugares.services.ts

public obtenerGeoData(direccion)
{
return this.http.get(‘https://maps.googleapis.com/maps/api/geocode/json’, {
params : {
address: direccion,
key: ‘AIzaSyCj9igPrB5Uui9ei3GdlgXie_nzL4M79SA’
}
});
}

la clave de la api deben sacarla de la pagina en credenciales.
esto por fin les arrojara el json en la consola cuando creen un negocio.

y en crear.component.ts

guardarLugar()
{
var direccion = this.lugar.calle +’&’+this.lugar.ciudad+’&’+this.lugar.pais;
this.lugaresService.obtenerGeoData(direccion)
.subscribe((result : any) =>{
console.log(result)
this.lugar.lat = result.results[0].geometry.location.lat;
this.lugar.lng = result.results[0].geometry.location.lng;

  if(this.id != 'new')
  {
    this.lugaresService.editarLugar(this.lugar);
    alert('Negocio editado correctamente');
    this.lugar = {};
  }
  else
  {
    this.lugar.id = Date.now(); // crea un id imposible de duplicar ya  que nos imprime la fecha y hora en milisegundos
    this.lugaresService.guardarLugar(this.lugar);
    alert('Negocio Creado correctamente');
  }
  this.lugar = {};
});

se realiza el llamado de los datos necesarios del json que arroja la funcion de lugares.services.ts.

espero les funcione, lo acabe de hacer

creoq ue avanzare un request por dia, ya que la api de google no deja avanzar 😦

Pueden usar como alternativa la api de https://locationiq.com/ totalmente gratis

Estoy siguiendo los pasos y todo bien solamente que al poner

this.place.lat = result.results[0].geometry.location.lat;
this.place.lng = result.results[0].geometry.location.lng;>

en results[0] me marca error al compilar y me dice que no existe en el Object
adjunto imagen del error. espero y puedan ayudarme Gracias.

Excelente! No sirvió de nada Geocoding porque es pago.

Me funcionó de la siguiente manera:
• En el crear.component.ts:
guardarLugar() {
var direccion = this.lugar.calle + ‘,’ + this.lugar.ciudad + ‘,’ + this.lugar.pais;
this.lugaresService.obtenerGeoData(direccion).subscribe((result:any) => {
//debugger;
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 = {};
}
);

}

• En el lugares.service.ts:
public obtenerGeoData(direccion:any){
return this.http.get(“https://maps.googleapis.com/maps/api/geocode/json?key=MI API KEY&address=”+direccion);
}

• En el app.module.ts:
import { HttpClientModule } from ‘@angular/common/http’;
en el imports: HttpClientModule

Hay un feature en TS para la concatenación, en lo personal me gusta más este estilo.

  const direccion = `${this.lugar.calle},${this.lugar.ciudad},${this.lugar.pais}`;

Hasta aquí llegue XD, ya luego me tomo un curso de Angular más actual. Pero esta bueno el curso.
Lo del mapa es de pago y no me sale el (http) solo http2xxx

Pregunta curiosa!!! Soy de venezuela y no tengo tarjeta de crédito valida para autenticar una forma de pago en google, como podría hacer en este caso?