google maps - geolocalizacion - Angular2 No se puede encontrar el espacio de nombres ''google''

ionic google maps

Question

Estoy trabajando con angular2-google-maps y la última versión de Angular2. Estoy tratando de convertir algunas de las funciones del componente del mapa local en servicios en su propio archivo maps.service.ts . Por ejemplo:

map.component.ts

getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    geocoder.geocode(request, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        let result = results[0];
        if (result != null) {
          this.fillInputs(result.formatted_address);
        } else {
          alert("No address available!");
        }
      }
    });
}
}

En algo como: maps.service.ts

getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    return new Observable((observer: Observer<google.maps.GeocoderResult[]>) => {
        geocoder.geocode({ request }, (
            (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results);
                    observer.complete();
                } else {
                    console.log(''Geocoding service failed due to: '' +status);
                    observer.error(status);
                }
            }
        ));
    });
}

El problema que estoy obteniendo es que la variable de google no se reconoce cuando intento usar Observer<google.maps.GeocoderResult[]> . He declare var google: any; fuera de la clase de servicio también.

La variable de google funciona en mi map.componenet.ts pero no se reconoce en maps.service.ts .

Answer 1

Angular6 pasos:

1. npm install @types/googlemaps --save-dev
2. Agregue googlemaps a la matriz de tipos en tsconfig.app.json respectivamente en tsconfig.spec.json
3. Reiniciar el servidor npm

Al final debería verse así:

Puede eliminar ambos tipos de declaración de los componentes: import {} from ''@types/googlemaps''; declare var google: any; No tienes que incluir ninguno de ellos.

PS: Si está utilizando GoogleMapsAPIWrapper.getNativeMap () de agm-s, debe convertir el objeto de mapa antes de usarlo. Por ejemplo, activar la capa de tráfico:

this.apiWrapper.getNativeMap().then(map => {
    this.trafficLayer = new google.maps.TrafficLayer();
    const gMap: any = map;
    this.trafficLayer.setMap(gMap as google.maps.Map);
});

Answer 2

Añadir

declare var google: any;

después de las importaciones de TypeScript

Consulte también https://github.com/SebastianM/angular2-google-maps/issues/689

Answer 3

En mi caso, he definido los componentes del mapa de la siguiente manera:

map: google.maps.Map;
infoWindow: google.maps.InfoWindow = new google.maps.InfoWindow();
marker: google.maps.Marker;
autocomplete: google.maps.places.Autocomplete;
panaroma: google.maps.StreetViewPanorama;

El problema se resolvió cambiando todos los tipos de componentes a any siguientes:

map: any;
infoWindow = new google.maps.InfoWindow();
marker: any;
autocomplete: any;
panaroma: any;

Answer 4

Está trabajando para mí también:

Primero instale los typings para google maps en cmd en la raíz del proyecto

npm install @types/googlemaps --save --dev

Y luego agregue en su archivo de componente .ts continuación:

import {} from ''@types/googlemaps'';

Answer 5

Finalmente me di cuenta del problema, que no sabía que era una cosa. Mi componente en el que hacía referencia a los servicios se llamaba map.component.ts mientras que mi archivo de servicios se llamaba maps.service.ts con las s al final del map . Después de que cambié el archivo y las declaraciones de import todo funcionó bien.

Answer 6

Me enfrentaba al mismo problema que intenté:

declare var google: any;

Pero no funcionó para mí.
Encontré esta answer y funcionó para mí.
Primero asegúrate de que instalaste los typings para google maps
npm install @types/googlemaps --save --dev

--dev bandera está en desuso. Utilice npm install @types/googlemaps --save-dev

Y luego en tu controlador.

import {} from ''@types/googlemaps'';

Answer 7

Para evitar más sufrimiento de cualquier otra persona con este problema.

npm install @google/maps

https://www.npmjs.com/package/@google/maps

ENTONCES:

import { google } from ''@google/maps'';

Básicamente estamos importando el objeto google desde el paquete @google/maps .

Probado en 2018 después de que @types/googlemaps dejaron de funcionar.

Answer 8

Tengo un problema similar con Angular 6, e hice todas las soluciones posibles mencionadas anteriormente, pero no tuve suerte. Finalmente, logro resolver este problema agregando googlemaps en los types dentro de los archivos tsconfig.app y tsconfig.spec . Espero que ayude a los demás.