web-dev-qa-db-fra.com

Angular2 Impossible de trouver l'espace de noms 'google'

Je travaille avec angular2-google-maps et dernière version de Angular2. J'essaie de convertir certaines fonctions du composant de carte locale en services dans leur propre fichier maps.service.ts. Par exemple:

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!");
        }
      }
    });
}
}

Dans quelque chose comme: 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);
                }
            }
        ));
    });
}

Le problème que je reçois est que la variable google n'est pas reconnue lorsque j'essaie d'utiliser Observer<google.maps.GeocoderResult[]>. J'ai declare var google: any; en dehors de la classe de service également.

La variable google fonctionne dans mon map.componenet.ts mais ne sont pas reconnus dans le maps.service.ts.

google-mapsangulartypescriptangular-cliangular2-google-maps
26
Milo

J'ai finalement compris le problème, ce que je ne savais pas être une chose. Mon composant dans lequel je faisais référence aux services s'appelait map.component.ts alors que mon fichier de services s'appelait maps.service.ts avec s à la fin de map. Après avoir changé le fichier et les instructions import, tout a bien fonctionné.

1
Milo

Je faisais face au même problème que j'ai essayé:

declare var google: any;

Mais cela n'a pas fonctionné pour moi.
J'ai trouvé ceci réponse et cela a fonctionné pour moi.
Tout d’abord, assurez-vous d’avoir installé les saisies pour google maps
npm install @types/googlemaps --save --dev

L'indicateur --dev est obsolète. Utilisation npm install @types/googlemaps --save-dev

Et puis dans votre contrôleur

import {} from '@types/googlemaps';
53
Ayman Sharaf

Étapes angulaires 6 et 7 (devrait également fonctionner pour toutes les autres Angular)):

  1. npm install @types/googlemaps --save-dev
  2. Ajoutez googlemaps au tableau de types dans tsconfig.app.json respectivement dans tsconfig.spec.json
  3. Redémarrez le serveur NPM

En fin de compte devrait ressembler à ceci:

enter image description here

Vous pouvez supprimer les deux types de déclaration des composants: import {} from '@types/googlemaps';declare var google: any; Vous ne devez en inclure aucun.

PS: Si vous utilisez agm-s GoogleMapsAPIWrapper.getNativeMap (), vous devez convertir l'objet de la carte avant de l'utiliser. Par exemple, activer la couche de trafic:

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

Ajouter

declare var google: any;

après les importations TypeScript

Voir aussi https://github.com/SebastianM/angular2-google-maps/issues/689

8
Günter Zöchbauer

Pour prévenir plus de souffrance de quiconque avec ce problème.

npm install @google/maps

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

PUIS:

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

Fondamentalement, nous importons l’objet Google à partir du package @google/maps.

Testé en 2018 après @types/googlemaps cessé de travailler.

5
clse

Cela fonctionne pour moi aussi:

Commencez par installer le typings de Google Maps en cmd à la racine du projet.

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

Et ajoutez ensuite dans votre .ts fichier composant ci-dessous:

import {} from '@types/googlemaps';
3
gauravbhai daxini

J'ai un problème similaire avec Angular 6, et j'ai fait toutes les solutions possibles mentionnées ci-dessus, mais pas de chance. Enfin, j'ai réussi à résoudre ce problème en ajoutant googlemaps dans types à l'intérieur tsconfig.app et tsconfig.spec des dossiers. J'espère que ça aide pour les autres.

1
chaendler

Dans mon cas, j'avais 2 types d'erreurs:

  • Impossible de trouver l'espace de noms google
  • Impossible de trouver le nom google

Depuis que dans mon code j'utilise:

let autocomplete = new google.maps.places.Autocomplete(...)

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

Donc corrigé en ajoutant ceci:

declare var google: any;

declare namespace google.maps.places {
    export interface PlaceResult { geometry }
}
0
odiaz

Dans mon cas, j'ai défini les composants de la carte comme suit:

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;

Le problème a été résolu en changeant tous les types de composants en any comme ci-dessous:

map: any;
infoWindow = new google.maps.InfoWindow();
marker: any;
autocomplete: any;
panaroma: any;
0
Niral Munjariya
`
import { Observable } from 'rxjs';
import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
import { Injectable, NgZone } from '@angular/core';
declare var google: any;

@Injectable({
  providedIn: 'root'
})
export class MapService extends GoogleMapsAPIWrapper {
  geocoder: Promise<any>;
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
    super(__loader, __zone);
    this.geocoder = this.__loader.load().then(() => new google.maps.Geocoder());
  }

  getLatLan(address: string): Observable<any> {
    return Observable.create(observer => {
      this.geocoder.then((geocoder) => {
        geocoder.geocode({ 'address': address }, (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            observer.next(results[0].geometry.location);
            observer.complete();
          } else {
            console.error('Error - ', results, ' & Status - ', status);
            observer.next({});
            observer.complete();
          }
        });
      });
    });
  }
}`

Ceci est un service avec une méthode pour obtenir l'adresse et retourner lan et lat.

0
Ramin Ar