Angular-google-maps: Verwendung von Geocoder mit GoogleMapsAPIWrapper

Wenn Sie nur Geocoder() benötigen, müssen Sie getNativeMap() nicht verwenden.

Ich importiere MapsAPILoader , also kann ich es so verwenden:

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

Wenn Sie jedoch die native Karte erhalten möchten, muss Ihre TestComponent in die Google Map-Komponente geladen werden:

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

und Sie müssen sicher sein, dass Ihre Instanz von GoogleMapsAPIWrapper in TestComponent dieselbe Instanz ist, die von SebmGoogleMap verwendet wird

@gnujeremie danke für den Tipp zur Verwendung von MapsAPILoader. Wie gehe ich beim Importieren vor? Haben Sie es zusammen mit AgmCoreModule importiert?

Nein, AgmCoreModule wird nur in mein Modul mit Google Map importiert.
Ich importiere import { MapsAPILoader } from 'angular2-google-maps/core'; direkt in meinen Service.

Wie wäre es damit -

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

Zusätzlich zu der von @vintesh vorgestellten Lösung musste ich Lat und Lng in der NgZone aktualisieren, um die Karte zu aktualisieren.

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

Ich habe immer noch Probleme, wenn ich versuche, den Geocoder zu verwenden. Hier ist mein 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);
    });

Ich bekomme zwei Fehler:

Cannot find name 'google'.
und
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 müssen Sie vor der Deklaration Ihres Konstruktors declare var google: any; hinzufügen.

@gnujeremie Das löst das undefinierte Google-Problem, sagt mir aber immer noch, dass MapsAPILoader nicht von angle2-google-maps exportiert wird.

@slooker Ich hatte auch das gleiche Problem und der MapsAPILoader-Fehler kommt, weil "node_modules/angular2-google-maps/core/index.js" MapsAPILoader nicht exportiert. Ich habe dieses Problem gelöst. Fügen Sie den folgenden Code wie folgt in die Datei "node_modules/angular2-google-maps/core/index.js" ein:

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

Das funktioniert für mich. Hoffe das wird auch bei dir funktionieren.

Habt ihr eine funktionierende Version? Ich bekomme meine Adressen aus einer Datenbank und brauche ihre Koordinaten, um einen Markierungscluster zu bilden. GeoCoder ist im Konstruktor definiert, aber nicht über die nginit-Methode zugänglich.

VinTesh, warum sagt der von Ihnen aufgeführte Dienst, dass Google nicht definiert ist? Was ist der richtige Weg, um dies zu tun? Danke

Ich stehe vor dem gleichen undefinierten Google-Problem. Irgendwelche Vorschläge?

Ich verwende "@agm/core": "^1.0.0-beta.0"

Danke

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

ist mein Code und es funktioniert gut, aber ich versuche, einen Komponententest zu schreiben

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

aber es scheitert mit

 Failed: google is not defined

Hilfe bitte?

Hallo "google undefined"-Freunde. Schon den Tipp unserer Kollegin @gnujeremie ausprobiert?
Das funktioniert bei mir (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, können Sie ein Beispiel dafür geben, wie dies aufgerufen und verwendet wird?

@DoubleExposure vorausgesetzt, Sie haben einen solchen Konstruktor

Konstruktor (privat ms: MapsService) {
}

Sie können dies in Ihrem Code aufrufen

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

@FabioBentoLuiz @gnujeremie Hallo, habe deinen Code ausprobiert und er funktioniert super. Außer dem ersten Anruf, der immer fehlschlägt. Ich habe versucht, einen ersten Anruf in einem ngOnInit zu tätigen, aber es scheint nicht zu funktionieren.

Hier mein Nutzungsversuch

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

Hallo @Canadadry ,
Wie der erste Anruf fehlschlägt? Benutzt du den MapsAPILoader?

Meine Karte soll sich auf die Adresse zentrieren.
Also habe ich das clickSearchAddress() auf eine Schaltfläche gemappt und es verschiebt die Karte nur beim zweiten Klick. Beim ersten Klick habe ich nur das Log: Geokodierung abgeschlossen!
Seltsame Sache, ich habe den Aufruf von clickSearchAddress() auf das Abonnement von route.paramMap in ngOnInit gesetzt und dort funktioniert die Funktion beim ersten Aufruf.

Ich habe versucht zu warten, bevor ich mit dem Klicken beginne, um sicherzustellen, dass das Google Map-Skript geladen ist, aber es sind immer noch zwei Klicks erforderlich.

Der verwendete MapsService ist der von Ihnen bereitgestellte.

Probieren Sie es mit NgZone wie hier beschrieben aus

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

Fügen Sie Ihrem Konstruktor hinzu

constructor(private _zone: NgZone){
}

Stellen Sie dann Lat und Lng wie folgt ein:

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

Hier ist ein weiterer Thread , der den Grund dafür erklärt.

Lass mich wissen ob es funktioniert.

Es scheint zu funktionieren, aber ich verstehe nicht warum.
Danke

Ich habe es mit agm zum Laufen gebracht und die Antworten von @vintesh , @FabioBentoLuiz und @neilpennell kombiniert.

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

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

shops.component.html:

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

shops.component.css:

agm-map {
    height: 300px;
}

Danke Leute!

@taneljoeaar weißt du, warum ich bekomme, dass Google nicht definiert ist
bei MappingService.getLatLan

Ich kopiere meistens deinen Code und füge ihn ein.

Vielen Dank.

@beachjf Verwenden Sie stattdessen die @FabioBentoLuiz- Lösung, um Lat und Long zu erhalten, da die Variable „google“ möglicherweise noch nicht definiert ist, da Google Maps-Skripte noch geladen werden. Für mich geht das.

Versuchen
importiere { GoogleMapsAPIWrapper } von '@agm/core';
anstatt
importiere { GoogleMapsAPIWrapper } aus 'angular2-google-maps/core';
für neueste eckig

@taneljoeaar oder versuchen Sie import { } from 'googlemaps'; in der Datei, in der Sie den Fehler erhalten.
Stellen Sie sicher, dass die Typen für Googlemaps installiert sind. ( npm install --save @types/googlemaps )

Nun, ich weiß, das ist eine alte Frage, aber ich möchte zu diesem Thema einen Code kommentieren, um die Standortobjekte mit Name und Typ der Stadt, des Bundesstaates und des Landes zu erhalten. Aber in meinem Fall musste ich diese Namen aus den Koordinaten der Benutzer abrufen. Um dies zu tun, habe ich dies basierend auf den letzten Kommentaren geschrieben:

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

Um die Koordinatenwerte zu erhalten, habe ich die ionische native Geolokalisierung verwendet.
Der Code stammt aus einem eckigen 2+ & Ionic-Projekt.

Ich habe den Code so implementiert, wie Sie ihn zeigen, aber ich erhalte die folgende Fehlermeldung:

FEHLER Fehler: StaticInjectorError [MapsAPILoader]:
StaticInjectorError [MapsAPILoader]:
NullInjectorError: Kein Anbieter für MapsAPILoader!
bei _NullInjector.get (core.js: 923)
bei resolveToken (core.js: 1211)
bei tryResolveToken (core.js: 1153)
bei StaticInjector.get (core.js: 1024)
bei resolveToken (core.js: 1211)
bei tryResolveToken (core.js: 1153)
bei StaticInjector.get (core.js: 1024)
bei resolveNgModuleDep (core.js: 10586)
bei _createClass (core.js: 10625)
bei _createProviderInstance $ 1 (core.js: 10597)

HINWEIS: Ich verwende Angular 5

Können Sie mir bitte zur Hand gehen.
Danke schön.

@ronaldrenteria Hast du platziert

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

auf Ihre "Importe" in app.modules.ts?
Benutzt du LazyLoading?
Dieser Fehler tritt manchmal auf, wenn Sie vergessen, einen Import durchzuführen oder alle Anforderungen zu erfüllen, die die Bibliothek benötigt, um zu funktionieren.
Weitere Informationen erhalten Sie auf dieser Seite: Angular Maps – Getting Started .

Nun, ich möchte Ihnen sagen, dass ich bereits die Karte und eine Markierung zeige, aber ich möchte einige Richtungen in Längen- und Breitengrade umwandeln, aber das war nicht möglich.

Ich habe keinen Import in der app.modules.ts, da jede Komponente ihr eigenes Modul verwendet und ich LazyLoading verwende.

In diesem Fall habe ich eine Komponente namens home.component.ts und diese wiederum hat ein eigenes Modul namens home.module.ts

Vor der Verwendung von MapsAPILoader wurden bereits die Karte und die Markierungen angezeigt (z. B. durch manuelles Platzieren der Längen- und Breitengrade), aber jetzt möchte ich die Adressen aus der DB lesen und die Längen- und Breitengrade abrufen.

Danke schön.

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

Hallo zusammen

Vielleicht steht ja jemand vor einem ähnlichen Problem.

Ich muss die AGM-Bibliothek anpassen, ich habe den Code heruntergeladen und diesen Code als Teil meines Projekts eingefügt, deshalb füge ich das agmCoreModule aus dem lokalen src-Ordner in apps.module hinzu, wie hier.

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

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

Ich habe eine Seite mit Markierungen, die in einer ngFor-Schleife generiert wurden. Aber ich habe den nächsten Fehler.

```

[Breite]="ubicacion.posicion.latitud"
[Längengrad]="ubicacion.posicion.Längengrad"
[markerClickable]="true"
>

```

FEHLER Fehler: Nicht erfasst (versprochen): ReferenceError: Google ist nicht definiert
ReferenceError: Google ist nicht definiert
bei MarkerManager.webpackJsonp.102.MarkerManager.addMarker (marker-manager.ts:82)
bei AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges (marker.ts:169)

Irgendeine Idee, was das Problem sein könnte

Für alle, die den Fehler „google is undefined“ erhalten:

Verwenden Sie dieses Ereignis 'mapReady' des agm-map-Elements.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Könnte jemand mit einem funktionierenden Beispiel aufwarten?

Arbeitsbeispiel des Geokodierungsdienstes https://stackblitz.com/edit/angular-google-maps-demo-geocoding basierend auf den hier aufgeführten Beispielen.

Kann ich mapsAPILoader.load() mehrmals aufrufen?

Hallo zusammen, ich hatte ein kleines Problem, ich bin neu bei AGM und auch eckig, aber die Sache ist, dass ich die place_id habe, ich wollte dies in ein Latlng-Objekt ändern, das war es, jede Hilfe wird geschätzt

@henoktsegaye Grundprinzip hier https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
Sie können also das oben gepostete Beispiel verwenden this.geocoder = new google.maps.Geocoder() und geocoder.geocode({'placeId': placeId}, callbackFunction(results, status)) aber dies wird nach dem Laden des Skripts sein

Für alle, die den Fehler „google is undefined“ erhalten:

Verwenden Sie dieses Ereignis 'mapReady' des agm-map-Elements.
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

Probe:
(mapReady)="initialisierterGoogleMapGeocoder($event)"