Angular-google-maps: GoogleMapsAPIWrapperでのジオコーダーの使用

Geocoder（）だけが必要な場合は、getNativeMap（）を使用する必要はありません。

MapsAPILoaderをインポートしているので、次のように使用できます。

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

ただし、ネイティブマップを取得する場合は、TestComponentをGoogleマップコンポーネント内にロードする必要があります。

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

また、 TestComponent内のGoogleMapsAPIWrapperのインスタンスが、 SebmGoogleMap使用されるインスタンスと同じであることを確認する必要があります。

MapsAPILoaderを使用するためのヒントについては@gnujeremiethx。 どうすればインポートできますか？ AgmCoreModuleと一緒にインポートしましたか？

いいえ、AgmCoreModuleはグーグルマップを使用して私のモジュールにのみインポートされます。
import { MapsAPILoader } from 'angular2-google-maps/core'; をサービスに直接インポートします。

これはどう -

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

@vinteshによって提示されたソリューションに加えて、マップを更新するためにNgZone内のlatとlngを更新する必要がありました。

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

ジオコーダーを使おうとすると、まだ問題が発生します。 これが私のコードです。

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

2つのエラーが発生します：

Cannot find name 'google'.
と
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コンストラクターを宣言する前に、 declare var google: any;を追加する必要があります。

@gnujeremieこれは、グーグルの未定義の問題を解決しますが、MapsAPILoaderがangular2-google-mapsによってエクスポートされないことを教えてくれます。

@slooker私も同じ問題に直面し、「node_modules / angle2-google-maps / core / index.js」がMapsAPILoaderをエクスポートしないため、MapsAPILoaderエラーが発生します。この問題は解決しました。 次のように、「node_modules / angle2-google-maps / core /index.js」ファイルに次のコードを挿入します。

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

これは私のために働きます。 これがあなたにも役立つことを願っています。

動作するバージョンはありますか？ データベースから住所を取得し、マーカークラスターを構築するためにそれらの座標が必要です。 GeoCoderはコンストラクターで定義されていますが、nginitメソッドを介してアクセスすることはできません。

VinTesh、あなたがリストしたサービスがなぜグーグルが未定義であると言うのですか？ これを行うための適切な方法は何ですか？ ありがとう

私は同じグーグル未定義の問題に直面しています。 助言がありますか？

「@agm / core」を使用しています：「^ 1.0.0-beta.0」

ありがとう

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

は私のコードであり、正常に動作しますが、単体テストを作成しようとしています

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

しかし、それは失敗します

 Failed: google is not defined

助けてください？

こんにちは「グーグル未定義」の友達。 同僚の@gnujeremieのヒントを試しましたか？
これは私のために働いています（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();
            }

        });
    }
}

ファビオ、これがどのように呼ばれ、使用されているかのサンプルを提供できますか？

@DoubleExposureは、このようなコンストラクターがあると想定しています

コンストラクター（プライベートms：MapsService）{
}

これをコードで呼び出すことができます

this.ms.getGeocoding（'10 10th Street NE、Atlanta、GA 30309 '）。subscribe（function（x）{
console.log（x.toString（））;
}）;

@FabioBentoLuiz @gnujeremieこんにちは 'あなたのコードを試しましたが、うまく機能しています。 常に失敗する最初の呼び出しを除いて。 ngOnInitで最初の呼び出しを行おうとしましたが、機能しないようです。

ここで私の使用の試み

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

こんにちは@Canadadry 、
最初の呼び出しはどのように失敗しますか？ MapsAPILoaderを使用していますか？

私の地図は住所を中心にしています。
だから私はボタンにclickSearchAddress()をマッピングしました、そしてそれは2回目のクリックでマップを動かすだけです。 最初のクリックでは、ログのみが表示されます：ジオコーディングが完了しました！
見知らぬ人、私はngOnInitのroute.paramMapのサブスクライブにclickSearchAddress()呼び出しを配置し​​、最初の呼び出しで関数が機能します。

グーグルマップスクリプトがロードされていることを確認するためにクリックを開始する前に待ってみましたが、それでも2つのクリックが必要です。

使用されるMapsServiceは、提供するものです。

ここで説明されているように、 NgZoneを使用して試してください

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

コンストラクターに追加する

constructor(private _zone: NgZone){
}

次に、latとlngを次のように設定します。

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

その理由を説明する別のスレッドがあります。

動作するかどうか教えてください。

うまくいくようですが、理由がわかりません。
ありがとう

@ vintesh、 @ FabioBentoLuiz 、@ neilpennellの回答を組み合わせたagmで動作させました。

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

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

shop.component.html：

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

shop.component.css：

agm-map {
    height: 300px;
}

みんなありがとう！

@taneljoeaar私がグーグルを取得している理由が定義されていないことを知っていますか
MappingService.getLatLanで

私は主にあなたのコードをコピーして貼り付けます。

どうもありがとう。

@beachjfは、代わりに@FabioBentoLuizソリューションを使用して、緯度と長さを取得します。これは、変数「google」が、Googleマップスクリプトがまだロードされているため、まだ定義されていない可能性があるためです。 わたしにはできる。

試す
import {GoogleMapsAPIWrapper} from '@ agm / core';
それ以外の
import {GoogleMapsAPIWrapper} from'angular2-google-maps / core ';
最新の角度

@taneljoeaarまたは、エラーが発生しているファイルでimport { } from 'googlemaps';を試してください。
googlemapsのタイプがインストールされていることを確認してください。 （ npm install --save @types/googlemaps ）

これは古い質問ですが、このトピックについて、都市、州、国の名前とタイプを使用してロケーションオブジェクトを取得するためのコードについてコメントしたいと思います。 しかし、私の場合、ユーザーの座標からこれらの名前を取得する必要がありました。 それで、それをするために、私は最後のコメントに基づいてこれを書きました：

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

座標値を取得するために、私はイオンのネイティブジオロケーションを使用しました。
コードはAngular2 +＆Ionicプロジェクトからのものです。

表示されているとおりにコードを実装しましたが、次のエラーが発生します。

エラーエラー：StaticInjectorError [MapsAPILoader]：
StaticInjectorError [MapsAPILoader]：
NullInjectorError：MapsAPILoaderのプロバイダーはありません！
_NullInjector.get（core.js：923）で
resolveToken（core.js：1211）で
tryResolveToken（core.js：1153）で
StaticInjector.get（core.js：1024）で
resolveToken（core.js：1211）で
tryResolveToken（core.js：1153）で
StaticInjector.get（core.js：1024）で
resolveNgModuleDep（core.js：10586）
_createClass（core.js：10625）
_createProviderInstance $ 1（core.js：10597）

注：私はAngular5を使用しています

手を貸していただけませんか。
ありがとう。

@ronaldrenteria配置しましたか

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

app.modules.tsの「インポート」について？
LazyLoadingを使用していますか？
このエラーは、インポートを実行したり、libが機能するために必要なすべての要件を実行したりするのを忘れた場合に発生することがあります。
そのページで詳細情報を入手できます： AngularMaps-はじめに。

さて、私はあなたに言いたいです、私はすでに地図とマーカーを示しています、しかし私がしたいのはいくつかの方向を緯度と経度に変換することです、しかしこれは不可能でした。

各コンポーネントが独自のモジュールを使用しており、LazyLoadingを使用している場合は、app.modules.tsにインポートがありません。

この場合、home.component.tsというコンポーネントがあり、これにはhome.module.tsという独自のモジュールがあります。

MapsAPILoaderを使用する前は、地図とマーカーが表示されていました（たとえば、経度と緯度を手動で配置するなど）が、DBから住所を読み取り、経度の緯度を取得したいと思います。

ありがとう。

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

みなさん、こんにちは。

たぶん誰かが同様の問題に直面しています。

AGMライブラリをカスタマイズする必要があります。コードをダウンロードし、プロジェクトの一部のようにこのコードを含めました。したがって、このように、apps.moduleのローカルsrcフォルダーからagmCoreModuleを追加します。

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

AgmCoreModule.forRoot（{
apiKey： 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}）、

ngForループで生成されたマーカーのあるページがあります。 しかし、私は次のエラーが発生しています。

```

[latitude] = "ubicacion.posicion.latitud"
[longitude] = "ubicacion.posicion.longitud"
[markerClickable] = "true"
>>

`` `

エラーエラー：キャッチされていません（約束中）：ReferenceError：googleが定義されていません
ReferenceError：グーグルは定義されていません
MarkerManager.webpackJsonp.102.MarkerManager.addMarker（marker-manager.ts：82）で
AgmMarker.webpackJsonp.291.AgmMarker.ngOnChanges（marker.ts：169）で

何が問題になる可能性があるか

「グーグルは未定義」エラーを取得しているすべての人のために：

agm-map要素のこのイベント 'mapReady'を使用します。
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

誰かが実用的な例を思い付くことができますか？

ここにリストされている例に基づいたジオコーディングサービスhttps://stackblitz.com/edit/angular-google-maps-demo-geocodingの実例。

MapsAPILoader.load（）を複数回呼び出すことはできますか？

こんにちはすべての体私は少し問題がありました、AGMに不慣れで角度もあります、しかし問題は私がplace_idを取得したことです、私はこれをlatlngオブジェクトに変更したかったですそれはそれでした、どんな助けも適用されます

@henoktsegayeの基本原則はこちらhttps://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id
したがって、上記の例を使用できます。簡単に言うと、 this.geocoder = new google.maps.Geocoder()とgeocoder.geocode({'placeId': placeId}, callbackFunction(results, status))が必要ですが、これはスクリプトが読み込まれた後です。

「グーグルは未定義」エラーを取得しているすべての人のために：

agm-map要素のこのイベント 'mapReady'を使用します。
" https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#mapReady "

サンプル：
（mapReady）= "initializedGoogleMapGeocoder（$ event）"