Angular-google-maps: Usando Geocoder con GoogleMapsAPIWrapper

Si solo necesita Geocoder(), no necesita usar getNativeMap().

Estoy importando MapsAPILoader , así que puedo usarlo de esta manera:

this.mapsAPILoader.load().then(() => {
    console.log('google script loaded');
    var geocoder = new google.maps.Geocoder();
});

Pero si desea obtener el mapa nativo, su TestComponent debe cargarse dentro del componente del mapa de Google:

<sebm-google-map [latitude]="lat" [longitude]="lng">
    <app-test></app-test>
</sebm-google-map>

y debe asegurarse de que su instancia de GoogleMapsAPIWrapper dentro TestComponent sea ​​la misma instancia utilizada por SebmGoogleMap

@gnujeremie gracias por la sugerencia de usar MapsAPILoader. ¿Cómo hago para importarlo? ¿Lo importó junto con AgmCoreModule?

No, AgmCoreModule se importa solo en mi módulo usando google map.
Importo directamente import { MapsAPILoader } from 'angular2-google-maps/core'; en mi servicio.

Qué tal esto -

import { Injectable, NgZone } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { MapsAPILoader } from 'angular2-google-maps/core';
import { Observable, Observer } from 'rxjs';

declare var google: any;

@Injectable()
export class GMapsService extends GoogleMapsAPIWrapper{ 
    constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
        super(__loader, __zone);
    }

    getLatLan(address: string) {
        console.log('Getting Address - ', address);
        let geocoder = new google.maps.Geocoder();
        return Observable.create(observer => {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results[0].geometry.location);
                    observer.complete();
                } else {
                    console.log('Error - ', results, ' & Status - ', status);
                    observer.next({});
                    observer.complete();
                }
            });
        })
    }
}

Además de la solución presentada por @vintesh , tuve que actualizar el lat y lng dentro de NgZone para actualizar el mapa.

clickSearchAddress() {
        this._mapsService.getLatLan(this.model.address)
            .subscribe(
            result => {
                // needs to run inside zone to update the map
                this._zone.run(() => {
                    this.model.lat = result.lat();
                    this.model.lng = result.lng();
                });
            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

Todavía tengo problemas cuando trato de usar el geocodificador. Aquí está mi código.

import { MapsAPILoader } from 'angular2-google-maps/core';
constructor(public mapsApiLoader: MapsAPILoader) {
    this.mapsApiLoader.load().then(() => {
      console.log('google script loaded');
      this.geocoder = new google.maps.Geocoder();
      console.log(this.geocoder);
    });

Me sale dos errores:

Cannot find name 'google'.
y
rollup failed: 'MapsAPILoader' is not exported by node_modules/angular2-google-maps/core/index.js (imported by src/services/location.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

@slooker necesita agregar declare var google: any; antes de la declaración de su constructor.

@gnujeremie Eso resuelve el problema indefinido de Google, pero aún me dice que angular2-google-maps no exporta MapsAPILoader.

@slooker Yo también enfrenté el mismo problema y aparece un error de MapsAPILoader porque "node_modules/angular2-google-maps/core/index.js" no exporta MapsAPILoader. He resuelto este problema. Inserte el siguiente código en el archivo "node_modules/angular2-google-maps/core/index.js" de la siguiente manera:

var core_module_2 = require('./core.umd'); exports.MapsAPILoader = core_module_2.MapsAPILoader;

Esto funciona para mí. Espero que esto funcione para ti también.

¿Tienen una versión funcional? Obtengo mis direcciones de una base de datos y necesito sus coordenadas para construir un grupo de marcadores. GeoCoder está definido en el constructor, pero no se puede acceder a él a través del método nginit.

VinTesh, ¿por qué el servicio que enumeró dice que Google no está definido? ¿Cuál es la forma correcta de hacer esto? Gracias

Estoy enfrentando el mismo problema indefinido de Google. ¿Alguna sugerencia?

Estoy usando "@agm/core": "^1.0.0-beta.0"

Gracias

getCurrentPositionSuccessCallBack(position: Position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    const latLng: LatLngLiteral = {
      lat: latitude,
      lng: longitude
    };

    const geoCoder = new google.maps.Geocoder();

    geoCoder.geocode({ "location": latLng }, (results, status) => {

es mi código y funciona bien, pero estoy tratando de escribir una prueba unitaria

fit('onGeoLocate should set the right location', () => {

    spyOn(navigator.geolocation, 'getCurrentPosition').and.callFake(function () {
      const position = { coords: { latitude: 32, longitude: -96 } };
      arguments[0](position);
    });
    component.onGeoLocate();

pero falla con

 Failed: google is not defined

¿Ayuda por favor?

Hola amigos de "google indefinido". ¿Probaste el tip de nuestro colega @gnujeremie?
Esto está funcionando para mí (Angular 2.2.3):

import { Injectable } from '@angular/core';
import { MapsAPILoader } from 'angular2-google-maps/core';
import { Observable } from 'rxjs/Observable';

declare var google: any;

@Injectable()
export class MapsService {
    constructor(private __loader: MapsAPILoader) {

    }

    getGeocoding(address: string) {
        return Observable.create(observer => {
            try {
                //at this point the variable google may be still undefined (google maps scripts still loading)
                //so load all the scripts, then...
                this.__loader.load().then(() => {
                    let geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ address }, (results, status) => {

                        if (status === google.maps.GeocoderStatus.OK) {
                            const place = results[0].geometry.location;
                            observer.next(place);
                            observer.complete();
                        } else {
                            console.error('Error - ', results, ' & Status - ', status);
                            if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                                observer.error('Address not found!');
                            }else {
                                observer.error(status);
                            }

                            observer.complete();
                        }
                    });
                });
            } catch (error) {
                observer.error('error getGeocoding' + error);
                observer.complete();
            }

        });
    }
}

Fabio, ¿puede proporcionar una muestra de cómo se llama y se usa esto?

@DoubleExposure asumiendo que tienes un constructor como este

constructor (ms privado: MapsService) {
}

puedes llamar a esto en tu código

this.ms.getGeocoding( '10 10th Street NE, Atlanta, GA 30309' ).subscribe(función (x) {
consola.log(x.toString());
});

@FabioBentoLuiz @gnujeremie Hola, probé tu código y funciona muy bien. Excepto la primera llamada que siempre falla. Intenté hacer una primera llamada en un ngOnInit pero parece que no funciona.

Aquí mi intento de uso

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute, ParamMap} from '@angular/router';

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';

import { Place } from './../place';
import { PlaceService } from './../place.service';
import { MapsService } from './map.service';
import { AlertService } from './../AlertComponent/alert.service';


@Component({
  selector: 'app-detailview',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css'], 
})


export class DetailComponent implements OnInit {

    place: Place;  
    lat: number = 51.678418;
    lng: number = 7.809007;

    ngOnInit() {
        let selectedId = this.route.paramMap.subscribe(
                (params: ParamMap)  =>  this.place = this.placeService.getPlaceById(+params.get('id'))
            );
        this.maps.getGeocoding('')
            .subscribe(
            result => console.log(result),
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

    constructor(private placeService: PlaceService,
                private route       : ActivatedRoute,
                private location    : Location,
                private alert       : AlertService,
                private maps        : MapsService) {
    }

    clickSearchAddress() {
        let address = this.place.name + " " + this.place.address + " " + this.place.city + " " + this.place.postalCode;
        this.maps.getGeocoding(address)
            .subscribe(
            result => {
                    this.lat = result.lat();
                    this.lng = result.lng();
            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );
    }

    back(){
        this.location.back();
    }

Hola @Canadadry ,
¿Cómo falla la primera llamada? ¿Está utilizando MapsAPILoader?

Se supone que mi mapa debe centrarse en la dirección.
Entonces, asigné el clickSearchAddress() en un botón y solo mueve el mapa en el segundo clic. En el primer clic, solo tengo el registro: ¡Geocodificación completada!
Cosa extraña, puse la llamada clickSearchAddress() en la suscripción de route.paramMap en ngOnInit y allí la función funcionó en la primera llamada.

Intenté esperar antes de comenzar a hacer clic para asegurarme de que el script del mapa de Google esté cargado, pero aún requiere dos clics.

El MapsService utilizado es el que usted proporciona.

Pruébelo usando NgZone como se describe aquí

import { NgZone } from '@angular/core';

Añadir a su constructor

constructor(private _zone: NgZone){
}

Luego establece lat y lng así:

this.maps.getGeocoding(address)
            .subscribe(
            result => {
                    this._zone.run(() => {
                    this.lat = result.lat();
                    this.lng = result.lng();
            });

            },
            error => console.log(error),
            () => console.log('Geocoding completed!')
            );

Aquí hay otro hilo que explica la razón de esto.

Déjame saber si funciona.

Parece funcionar, pero no veo por qué.
Gracias

Lo conseguí trabajando con agm combinando respuestas de @vintesh , @FabioBentoLuiz y @neilpennell.

google-maps.service.ts:

import { Injectable, NgZone } from '@angular/core';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { Observable, Observer } from 'rxjs';

declare var google: any;

@Injectable()
export class GMapsService extends GoogleMapsAPIWrapper{ 
    constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
        super(__loader, __zone);
    }

    getLatLan(address: string) {
        console.log('Getting Address - ', address);
        let geocoder = new google.maps.Geocoder();
        return Observable.create(observer => {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results[0].geometry.location);
                    observer.complete();                    
                } else {
                    console.log('Error - ', results, ' & Status - ', status);
                    observer.next({});
                    observer.complete();
                }
            });
        })
    }
}

tiendas.component.ts:

import { Component, NgZone } from '@angular/core';
import { GMapsService } from '../services/google-maps.service'

@Component({  
  templateUrl: 'shops.component.html',
  styleUrls: ['shops.component.css']
})

export class ShopsComponent {  
  constructor(private gMapsService: GMapsService, private __zone: NgZone ){}
  lat:number
  lng:number

  getAddress() {
    this.gMapsService.getLatLan('Andorra')
      .subscribe(
        result => {
            this.__zone.run(() => {
                this.lat = result.lat();
                this.lng = result.lng();
            })
        },
        error => console.log(error),
        () => console.log('Geocoding completed!')
      );
  }
}

tiendas.componente.html:

<agm-map [latitude]="lat" [longitude]="lng"></agm-map>

tiendas.componente.css:

agm-map {
    height: 300px;
}

¡Gracias chicos!

@taneljoeaar , ¿sabe por qué obtengo que Google no está definido?
en MappingService.getLatLan

Principalmente copio y pego tu código.

Muchas gracias.

@beachjf usa la solución @FabioBentoLuiz en su lugar, para obtener la latitud y la longitud porque la variable "google" puede estar aún sin definir ya que las secuencias de comandos de Google Maps aún se están cargando. esto funciona para mi.

Tratar
importar { GoogleMapsAPIWrapper } desde '@agm/core';
en vez de
importar {GoogleMapsAPIWrapper} desde 'angular2-google-maps/core';
para el último angular

@taneljoeaar o pruebe import { } from 'googlemaps'; en cualquier archivo en el que esté recibiendo el error.
Asegúrese de que los tipos para googlemaps estén instalados. ( npm install --save @types/googlemaps )

Bueno, sé que es una vieja pregunta, pero me gustaría comentar sobre este tema un código para obtener los objetos de ubicación con nombre y tipo de ciudad, estado y país. Pero, en mi caso, necesitaba obtener estos nombres de las coordenadas de los usuarios. Entonces, para hacerlo, escribí esto basado en los últimos comentarios:

import {MapsAPILoader} from '@agm/core';

...

constructor(private mapsAPILoader: MapsAPILoader) {
    // Get this 'res' from some source, like ionic native geolocation
    // Or, for test, create some object like:
    let res = {
        coords: {
            latitude: 40.826514,
            longitude: -73.914628
        }
    }
    this.codeLatLng(res.coords);
  }

...

codeLatLng(coords) {
    this.mapsAPILoader.load().then(() => {
        console.log('google script loaded');
        let latlng = new google.maps.LatLng({lat: coords.latitude, lng: coords.longitude});
        let geocoder = new google.maps.Geocoder();
        let location = {
          country: null,
          state: null,
          city: null
        };
        geocoder.geocode({
          'latLng': latlng
        }, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              for (let i = 0; i < results[0].address_components.length; i++) {
                for (let b = 0; b < results[0].address_components[i].types.length; b++) {
                  if (results[0].address_components[i].types[b] == "country") {
                    location.country = !location.country ? results[0].address_components[i] : location.country;
                  } else if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    location.state = !location.state ? results[0].address_components[i] : location.state;
                  } else if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
                    location.city = !location.city ? results[0].address_components[i] : location.city;
                  }
                  if (location.city && location.state && location.country) {
                    break;
                  }
                }
              }

              console.log(location);
            } else {
              console.log("Results not available");
            }
          }
          else {
            console.log("Geocoder failed due to: ", status);
          }
        });
      }
    );
  }

Para obtener los valores de las coordenadas, utilicé la geolocalización nativa iónica.
El código provino de un proyecto angular 2+ & Ionic.

He implementado el código como lo muestra, pero recibo el siguiente error:

ERROR Error: StaticInjectorError [MapsAPILoader]:
Error del inyector estático [MapsAPILLoader]:
NullInjectorError: ¡No hay proveedor para MapsAPILoader!
en _NullInjector.get (core.js: 923)
en resolveToken (core.js: 1211)
en tryResolveToken (core.js: 1153)
en StaticInjector.get (core.js: 1024)
en resolveToken (core.js: 1211)
en tryResolveToken (core.js: 1153)
en StaticInjector.get (core.js: 1024)
en resolveNgModuleDep (core.js: 10586)
en _createClass (core.js: 10625)
en _createProviderInstance $ 1 (core.js: 10597)

NOTA: estoy usando Angular 5

¿Puedes por favor darme una mano?
Gracias.

@ronaldrenteria pusiste

AgmCoreModule.forRoot({
      apiKey: '<YOUR-GOOGLE-API-KEY>'
    })

en sus "importaciones" en app.modules.ts?
¿Está utilizando LazyLoading?
Ese error a veces ocurre cuando se olvida de hacer alguna importación o de hacer todos los requisitos necesarios para que la lib funcione.
Puede obtener más información en esa página: Angular Maps - Getting Started .

Bueno les quiero contar, ya muestro el mapa y un marcador, pero lo que quiero hacer es convertir algunas direcciones a latitud y longitud, pero esto no ha sido posible.

No tengo la importación en app.modules.ts, porque cada componente está usando su propio módulo y si estoy usando LazyLoading.

En este caso tengo un componente llamado home.component.ts y este a su vez tiene su propio modulo llamado home.module.ts

Antes de usar MapsAPILoader ya mostraba el mapa y los marcadores (ejemplo colocando la longitud y latitud manualmente), pero ahora quiero leer las direcciones de la base de datos y obtener la longitud y latitud.

Gracias.

mapas.servicio.ts

import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

// Manejo de Mapas
import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

declare var google: any;

@Injectable()
export class MapsService extends GoogleMapsAPIWrapper {
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
    super(__loader, __zone);
  }

  getLatLan(address: string) {
    console.log('Getting Address - ', address);
    let geocoder = new google.maps.Geocoder();
    return Observable.create(observer => {
      geocoder.geocode({ address: address }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          observer.next(results[0].geometry.location);
          observer.complete();
        } else {
          console.log('Error - ', results, ' & Status - ', status);
          observer.next({});
          observer.complete();
        }
      });
    });
  }
}

home.módulo.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { homeRouting } from './home.routing';
import { SmartadminModule} from '../shared/smartadmin.module';
import { HomeComponent} from './home.component';
// 614iT
import { config_church } from './../shared/churchpro.config';
// Indispensable para manejar los mapas.
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
@NgModule({
  imports: [
    CommonModule,
    homeRouting,
    SmartadminModule,
    AgmCoreModule.forRoot({
      apiKey: config_church.GOOGLE_API_KEY
    })
  ],
  declarations: [HomeComponent]
})
export class HomeModule {}

inicio.componente.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
// Mapas 
import { MapsService } from '../shared/services/maps.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: []
})
export class HomeComponent implements OnInit {
  title: string = 'My first AGM project';
  lat: number = 4.6517056;
  lng: number = -74.1028404;
  zoom: number = 13;
  Glat: number;
  Glng: number;

  constructor(private _mapsService: MapsService, private __zone: NgZone) {}

  ngOnInit() {}

  getAddress() {
    this._mapsService.getLatLan('Andorra').subscribe(result => {
        this.__zone.run(() => {
          this.Glat = result.lat();
          this.Glng = result.lng();
        });
      }, error => console.log(error), () => console.log('Geocoding completed!'));
  }
}

Hola a todos

Tal vez alguien se enfrenta a un problema similar.

Necesito personalizar la biblioteca AGM, descargué el código e incluí este código como parte de mi proyecto, por lo tanto, agrego el agmCoreModule desde la carpeta src local en apps.module, así.

import { AgmCoreModule } from '../agmLocalModule/core.module';

AgmCoreModule.forRoot({
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}),

tengo una página con marcadores generados en un bucle ngFor. Pero estoy teniendo el siguiente error.

```

[latitud]="ubicacion.posicion.latitud"
[longitud]="ubicacion.posicion.longitud"
[markerClickable]="verdadero"
>

```

ERROR Error: no capturado (en promesa): ReferenceError: google no está definido
ReferenceError: google no está definido
en MarkerManager.webpackJsonp.102.MarkerManager.addMarker (marker-manager.ts:82)
en AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges (marker.ts:169)

Alguna idea de cual puede ser el problema

Para todos aquellos que reciben el error 'google no está definido':

use este evento 'mapReady' del elemento agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

¿Alguien podría dar un ejemplo de trabajo?

Ejemplo de trabajo del servicio de geocodificación https://stackblitz.com/edit/angular-google-maps-demo-geocoding basado en los ejemplos enumerados aquí.

¿Puedo llamar a mapsAPILoader.load() varias veces?

hola a todos, tuve un pequeño problema, soy nuevo en AGM y angular también, pero obtuve el place_id, quería cambiar esto a objeto latlng, eso fue todo, cualquier ayuda es apreciada

Principio básico de @henoktsegaye aquí https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
para que pueda usar el ejemplo publicado anteriormente, en pocas palabras necesita this.geocoder = new google.maps.Geocoder() y geocoder.geocode({'placeId': placeId}, callbackFunction(results, status)) pero esto será después de que se cargue el script

Para todos aquellos que reciben el error 'google no está definido':

use este evento 'mapReady' del elemento agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Muestra:
(mapReady)="initializedGoogleMapGeocoder($evento)"