Angular-google-maps: Utilisation de Geocoder avec GoogleMapsAPIWrapper

Si vous avez juste besoin de Geocoder(), vous n'avez pas besoin d'utiliser getNativeMap().

J'importe MapsAPILoader , donc je peux l'utiliser de cette façon :

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

Mais si vous voulez obtenir la carte native, votre TestComponent doit être chargé dans le composant google map :

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

et vous devez être sûr que votre instance de GoogleMapsAPIWrapper à l'intérieur TestComponent est la même instance utilisée par SebmGoogleMap

@gnujeremie merci pour le conseil d'utiliser MapsAPILoader. Comment dois-je procéder pour l'importer ? L'avez-vous importé avec AgmCoreModule ?

Non, AgmCoreModule est importé uniquement dans mon module à l'aide de Google Map.
J'importe directement import { MapsAPILoader } from 'angular2-google-maps/core'; dans mon service.

Que dis-tu de ça -

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();
                }
            });
        })
    }
}

En plus de la solution présentée par @vintesh, j'ai dû mettre à jour la lat et lng à l'intérieur de la NgZone pour mettre à jour la carte.

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

Je rencontre toujours des problèmes lorsque j'essaie d'utiliser le géocodeur. Voici mon code.

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

J'obtiens deux erreurs :

Cannot find name 'google'.
et
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 vous devez ajouter declare var google: any; avant la déclaration de votre constructeur.

@gnujeremie Cela résout le problème google undefined, mais cela me dit toujours que MapsAPILoader n'est pas exporté par angular2-google-maps.

@slooker J'ai moi aussi rencontré le même problème et l'erreur MapsAPILoader se produit car "node_modules/angular2-google-maps/core/index.js" n'exporte pas MapsAPILoader. J'ai résolu ce problème. Insérez le code suivant dans le fichier "node_modules/angular2-google-maps/core/index.js" comme suit :

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

Cela fonctionne pour moi. J'espère que cela fonctionnera pour vous aussi.

Avez-vous une version de travail? J'obtiens mes adresses d'une base de données et j'ai besoin de leurs coordonnées pour construire un cluster de marqueurs. GeoCoder est défini dans le constructeur mais n'est pas accessible via la méthode nginit.

VinTesh, pourquoi le service que vous avez répertorié indique-t-il que Google n'est pas défini ? Quelle est la bonne façon de procéder ? Merci

Je suis confronté au même problème google undefined. Aucune suggestion?

J'utilise "@agm/core": "^1.0.0-beta.0"

Merci

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

est mon code et il fonctionne bien, mais j'essaie d'écrire un test unitaire

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();

mais ça échoue avec

 Failed: google is not defined

Aidez-moi, s'il vous plaît?

Bonjour amis "google undefined". Avez-vous essayé l'astuce de notre collègue @gnujeremie ?
Cela fonctionne pour moi (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, pouvez-vous fournir un exemple de la façon dont cela s'appelle et s'utilise ?

@DoubleExposure en supposant que vous avez un constructeur comme celui-ci

constructeur (ms privé : MapsService) {
}

vous pouvez appeler cela dans votre code

this.ms.getGeocoding( '10 10th Street NE, Atlanta, GA 30309' ).subscribe(function (x) {
console.log(x.toString());
});

@FabioBentoLuiz @gnujeremie Bonjour, j'ai essayé votre code et il fonctionne très bien. Sauf le premier appel qui échoue toujours. J'ai essayé de faire un premier appel dans un ngOnInit mais cela ne semble pas fonctionner.

Voici ma tentative d'utilisation

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();
    }

Salut @Canadadry ,
Comment le premier appel échoue? Utilisez-vous MapsAPILoader ?

Ma carte est censée se centrer sur l'adresse.
J'ai donc mappé le clickSearchAddress() sur un bouton et il ne déplace la carte qu'au deuxième clic. Au premier clic je n'ai que le log : Géocodage terminé !
Chose plus étrange, j'ai mis l'appel clickSearchAddress() sur l'abonnement de route.paramMap dans ngOnInit et là, la fonction fonctionne au premier appel.

J'ai essayé d'attendre avant de commencer à cliquer pour être sûr que le script google map est chargé mais cela nécessite toujours deux clics.

Le MapsService utilisé est celui que vous fournissez.

Essayez-le en utilisant NgZone comme décrit ici

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

Ajouter à votre constructeur

constructor(private _zone: NgZone){
}

Ensuite, réglez lat et lng comme ceci :

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!')
            );

Voici un autre fil qui en explique la raison.

Dites moi si ca marche.

Cela semble fonctionner, mais je ne vois pas pourquoi.
Merci

Je l'ai fait travailler avec agm en combinant les réponses de @vintesh , @FabioBentoLuiz et @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();
                }
            });
        })
    }
}

magasins.composant.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!')
      );
  }
}

magasins.composant.html :

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

magasins.composant.css :

agm-map {
    height: 300px;
}

Merci les gars!

@taneljoeaar savez-vous pourquoi je reçois google n'est pas défini
sur MappingService.getLatLan

Je copie et colle principalement votre code.

Merci beaucoup.

@beachjf utilise plutôt la solution @FabioBentoLuiz pour obtenir le lat et le long car la variable " google" peut être encore indéfinie car les scripts google maps sont toujours en cours de chargement. ça marche pour moi.

Essayer
importer { GoogleMapsAPIWrapper } depuis '@agm/core' ;
à la place de
importer {GoogleMapsAPIWrapper} à partir de 'angular2-google-maps/core' ;
pour le dernier angulaire

@taneljoeaar ou essayez import { } from 'googlemaps'; dans le fichier dans lequel vous obtenez l'erreur.
Assurez-vous que les types pour googlemaps sont installés. ( npm install --save @types/googlemaps )

Eh bien, je sais que c'est une vieille question, mais j'aimerais commenter sur ce sujet un code permettant d'obtenir les objets de localisation avec le nom et le type de la ville, de l'état et du pays. Mais, dans mon cas, j'avais besoin d'obtenir ces noms à partir des coordonnées des utilisateurs. Donc, pour le faire, j'ai écrit ceci sur la base des derniers commentaires:

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

Pour obtenir les valeurs des coordonnées, j'ai utilisé la géolocalisation native ionique.
Le code provient d'un projet angular 2+ & Ionic.

J'ai implémenté le code tel que vous le montrez mais j'obtiens l'erreur suivante :

ERREUR Erreur : StaticInjectorError [MapsAPILoader] :
StaticInjectorError [MapsAPILoader] :
NullInjectorError : Aucun fournisseur pour MapsAPILoader !
à _NullInjector.get (core.js : 923)
à resolveToken (core.js : 1211)
à tryResolveToken (core.js : 1153)
sur StaticInjector.get (core.js : 1024)
à resolveToken (core.js : 1211)
à tryResolveToken (core.js : 1153)
sur StaticInjector.get (core.js : 1024)
à resolveNgModuleDep (core.js : 10586)
à _createClass (core.js : 10625)
à _createProviderInstance $ 1 (core.js : 10597)

REMARQUE: j'utilise Angular 5

Pouvez-vous s'il vous plaît me donner un coup de main.
Merci.

@ronaldrenteria Avez-vous placé

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

sur vos "imports" dans app.modules.ts ?
Utilisez-vous le LazyLoading ?
Cette erreur se produit parfois lorsque vous oubliez de faire une importation ou de faire toutes les exigences requises par la bibliothèque pour fonctionner.
Vous pouvez obtenir plus d'informations sur cette page : Angular Maps - Getting Started .

Eh bien, je veux vous dire que j'ai déjà montré la carte et un marqueur, mais ce que je veux faire, c'est convertir certaines directions en latitude et longitude, mais cela n'a pas été possible.

Je n'ai pas l'importation dans app.modules.ts, car chaque composant utilise son propre module et si j'utilise LazyLoading.

Dans ce cas, j'ai un composant appelé home.component.ts et celui-ci à son tour a son propre module appelé home.module.ts

Avant d'utiliser MapsAPILoader, il affichait déjà la carte et les marqueurs (par exemple en plaçant manuellement la longitude et la latitude), mais maintenant je veux lire les adresses de la base de données et obtenir la longitude et la latitude.

Merci.

cartes.service.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.module.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 {}

home.component.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!'));
  }
}

salut tout le monde

Peut-être que quelqu'un est confronté à un problème similaire.

J'ai besoin de personnaliser la bibliothèque AGM, j'ai téléchargé le code et inclus ce code comme une partie de mon projet, donc j'ajoute le agmCoreModule du dossier src local dans apps.module, comme ceci.

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

AgmCoreModule.forRoot({
Clé API : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}),

J'ai une page avec des marqueurs générés dans une boucle ngFor. Mais j'ai l'erreur suivante.

```

[latitude]="ubicacion.posicion.latitude"
[longitude]="ubicacion.posicion.longitude"
[marqueurcliquable]="true"
>

```

ERREUR Erreur : Non détecté (dans la promesse) : ReferenceError : Google n'est pas défini
ReferenceError : Google n'est pas défini
à MarkerManager.webpackJsonp.102.MarkerManager.addMarker (marker-manager.ts:82)
à AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges (marker.ts:169)

Toute idée de ce qui pourrait être le problème

Pour tous ceux qui reçoivent l'erreur "Google n'est pas défini":

utilisez cet événement 'mapReady' de l'élément agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Quelqu'un pourrait-il trouver un exemple de travail?

Exemple de travail du service de géocodage https://stackblitz.com/edit/angular-google-maps-demo-geocoding basé sur les exemples répertoriés ici.

Puis-je appeler mapsAPILoader.load() plusieurs fois ?

salut tout le monde j'ai eu un petit problème, je suis nouveau sur AGM et angulaire aussi, mais le fait est que j'ai eu le place_id, je voulais changer cela en objet latlng c'est tout, toute aide est appréciée

@henoktsegaye principe de base ici https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
vous pouvez donc utiliser l'exemple de posté ci-dessus, en quelques mots, vous avez besoin this.geocoder = new google.maps.Geocoder() et geocoder.geocode({'placeId': placeId}, callbackFunction(results, status)) mais ce sera après le chargement du script

Pour tous ceux qui reçoivent l'erreur "Google n'est pas défini":

utilisez cet événement 'mapReady' de l'élément agm-map.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Goûter:
(mapReady)="initializedGoogleMapGeocoder($event)"