Angular-google-maps: マーカークラスターの使用方法は？

申し訳ありませんが、今すぐアドバイスはありません

@SebastianMマップオブジェクトにアクセスすることで実行できると思います。こちらをご覧ください： https ：

誰かが実際にこれをしましたか？ マーカークラスターのjsファイルは、.getMap（）から渡したマップオブジェクトが気に入らないようです。

@AbdulTheProgrammer私はこれが入るのを待っていました、私の最大の希望はそれがうまくいくことですか？ マップディレクティブで使用されるものと同じGoggleMapsAPIWrapperサービスのインスタンスでgetMap（）を呼び出したことは確かです。これは、現時点での私の最大の問題です。

私はカスタムコンポーネントを使用してそれをsebm-google-map内に含めることでそれを達成しました。 GoogleMapsAPIWrapperとnativeMapを使用します。

google maps javascript api（window.google.maps）を使用して手動でマーカーを追加し、MarkerClustererを作成します。

お役に立てば幸いです。

@ricardojbertolinセバスチャンがここで指摘したように、これは役に立ちます＃311、マップ内のカスタムコンポーネントは、ネイティブマップオブジェクトにアクセスする方法ですが、マネージャーサービスを使用してマーカーを追加するためのより良い方法があるはずです。 jsapiを介して手動で行うのとは対照的に...

また、js-marker-clustererを機能させるのに苦労しています。 ネイティブマップインスタンスへの参照を取得しますが、ネイティブマップマーカーへの参照も必要です。 <sebm-google-map-marker>のネイティブマップマーカーを取得する方法を知っている人はいますか？

@alexweber
カスタムコンポーネントとGoogleMapsApiWrapperの例はありますか？
「カスタムコンポーネントをコンポーネント内に配置する」とはどういう意味か理解していないようです。

@ siegerx3簡単に聞こえますが、最初にカスタムコンポーネントまたはディレクティブを作成します。

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

@Directive({
  selector: 'custom-directive'
})
export class CustomMapDirective {
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    this.gmapsApi.getNativeMap().then(map => {
      // map is the native google map object and the wrapper is the same instance as the one on the map
    });
  }
}

テンプレートが必要なかったため、ディレクティブを使用しました。コンポーネントを使用して、必要に応じてコンポーネントを指定できます。

言うまでもなく、使用しているコンポーネントのdirectivesセクションでカスタムコンポーネント/ディレクティブを指定する必要があります。 次に、コンポーネントをマップ内にドロップします。

<sebm-google-map>
  <!-- markers, info windows, etc -->

  <custom-directive></custom-directive>
</sebm-google-map>

Angular2 DIの動作方法により、GoogleMapsAPIWrapperサービスのプロバイダーを指定していないため、プロバイダーが見つかるまでコンポーネントツリーを上に移動します。 この場合、それは1ステップであり、 sebm-google-mapコンポーネントで提供されたGoogleMapsAPIWrapperを使用します

@jfmaeck MarkerManagerサービスにはgetNativeMarker()メソッドがあり、そのために使用できます。ラッパーについて上記のメソッドを使用して、同じマーカーマネージャーサービスインスタンスを取得できます。

@alexweber
コードを見ると、説明は理にかなっています！ ありがとう:)

@alexweberは、ネイティブマーカーインスタンスを取得する方法についてのヒントをありがとうございます。 ：私はまだ一つの質問は、しかし持っているgetNativeMarker()の方法MarkerManager見込んSebmGoogleMapMarkerそのパラメータとして、インスタンス（マーカー成分）。 このコンポーネントを変数に取り込んでgetNativeMarker関数に渡す方法を知っていますか？

@jfmaeck問題ありません！ 現時点では100％確実かどうかは確認できませんが、コンポーネントで@ViewChild('myMarker'): SebmGoogleMapMarkerを使用し、マークアップで#を使用して@ViewChild('myMarker'): SebmGoogleMapMarkerすることができます： <sebm-google-map-marker #myMarker> just ViewChildはngAfterViewInitでのみ正しく解決されることに注意してください。

@alexweberご

markers after view init []

http://plnkr.co/edit/7rdOz3QswDL0pik7SmAS?p=preview

忙しいと思いますが、ご覧になる機会があれば、よろしくお願いします。

@ContentChildrenを使用する場合（コンポーネント要素内に存在するインスタンスを取得するため）、 @ jfmaeckは機能します： http ： //plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp？p = preview

@jfmaeckあなたは近くにいました、これが@ViewChildrenであなたのプランクの作業フォークです： http ： //plnkr.co/edit/rJMCFoX9GokturcJljLh ？

カスタムマップコンポーネント@ContentChildren （ @ SebastianMが指摘したように）を使用して機能させるには機能しますが、マーカーにアクセスするために作成しただけであり、追加のコンポーネントを

@SebastianMと@alexweberに感謝します！

@alexweber @SebastianMまず、js-marker-clustererを使用するこのライブラリを含めるにはどうすればよいですか？ 特定のズームレベルでクラスターを使用する方法はありますか？ そして、このようなクラスターの画像を含めるにはどうすればよいですか： http ：

@ricardojbertolinコードを共有できるチャンスはありますか？ 私はangular2を初めて使用し（angularjsを1年以上使用しています）、少し迷っています。

@ alexweber 、

@jpcode申し訳ありませんが、しばらくこれに取り組んでいません...

私のプロジェクトの1つに実用的なソリューションがあります。
必要に応じて、例を挙げてプランカーをまとめることができますか？
@jpcode
@alexweber

@ siegerx3いいですね、大いに役立ちます。
私はグーグルマップAPI + markerclusterer.jsを使用するだけで別の方法で働いています。

@ siegerx3 、これはグーグルマップlibを使用するだけの基本的な例です：
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

保留中のPOC：
angle2-google-mapsを使用する方法では、「google」としてグローバルオブジェクトとの衝突を防ぐために内部に追加する必要があると思います。
回避策は、libからgoogleをロードしないようにすることです。
（MapsAPILoader、{useClass：NoOpMapsAPILoader}）を提供し、自分でロードしてclusterer.jsを追加します。

しかし、angular2-google-mapsがclustererをサポートするディレクティブを追加する場合はより良いです:)

@jpcode
私はそれをプランカーで動作させるために何時間も費やしました...成功しませんでした。
問題に関係のないエラーが常に発生します。
だから私はここにコードを表示します...

import { Directive, OnDestroy, OnInit } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
import { AppService } from '../../../services/index';
import { Observable } from 'rxjs';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'custom-map'
})
export class CustomMapDirective implements OnInit, OnDestroy {

  private map: GoogleMap;

  constructor(private gmapsApi: GoogleMapsAPIWrapper, private appService: AppService) {
  }

  ngOnInit() {

    this.gmapsApi.getNativeMap().then(map => {
      this.map = map;

      let shopMarker = {
        url: "assets/img/marker_shop.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }
      let loungeMarker = {
        url: "assets/img/marker_lounge.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }

      let markers = [];

      let style = {
        url: "/assets/img/marker.svg",
        height: 50,
        width: 50,
        anchor: [-14, 0],
        textColor: '#bd0b1d',
        textSize: 11,
        backgroundPosition: "center center"
      };

      var options = {
        imagePath: "/assets/img/marker",
        gridSize: 70,
        styles: [style, style, style]
      };

      Observable
        .interval(500)
        .skipWhile((s) => this.appService.Shops == null || this.appService.Shops.length <= 0)
        .take(1)
        .subscribe(() => {
          for (let shop of this.appService.Shops) {
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(shop.Latitude, shop.Longitude),
              icon: shop.Lounge ? loungeMarker : shopMarker
            });
            google.maps.event.addListener(marker, 'click', () => {
              this.appService.SelectedShop = shop;
            });
            markers.push(marker);

          }

          var markerCluster = new MarkerClusterer(map, markers, options);
          }
        })
    });
  }
}

このディレクティブをangular2-google-mapsタグに入れます。

<sebm-google-map>
      <custom-map></custom-map>
</sebm-google-map>

@ siegerx3 、angular2-google-mapsを使用してPOCを作成しました

アプローチ：

• index.htmlからグーグルマップを追加する
• clusterer.jsをインポートします
• google maps libをangular2-google-mapsからロードしないようにする（プロバイダーを使用）
• libから元のマップインスタンスを取得するディレクティブを追加します
• google / markercluster変数を使用してグローバルとして使用する

また、angular-2-google-mapsの他のディレクティブを使用することもできますが、clustererをサポートするためにlibに何かを追加した方が良いと思います。
->

このlibを使用してマップをペイントし、次にgoogleマップを使用するのは意味がないため、この場合、plunkrが示す前に、google maps libs + clusterer.jsだけを使用する方がよいと思います。

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
// npm install js-marker-clusterer --save
import 'js-marker-clusterer/src/markerclusterer.js';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'googlemap-directive'
})



export class GoogleMapDirective {

  googleMarkers : any;
  _map: any;

  zoom: number = 3;
  lat: number = 51.673858;
  lng: number = 7.815982;

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982
      },
      {
          lat: 51.373858,
          lng: 7.215982
      },
      {
          lat: 51.723858,
          lng: 7.895982
      }
  ]

   initMarkers(){
    let i = 0;
    let markers = this.markers;
    var result = [];
    for ( ; i < markers.length; ++i ){
       result.push( new google.maps.Marker({
            position : markers[ i ] 
        })
       );
    }
    return result;
  }



  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    var me = this;
    this.gmapsApi.getNativeMap().then(map => {
      // instance of the map.
      me._map = map;
      me.initializeMap();
    });
  }

  initializeMap(){
      var me = this;
      me.googleMarkers = me.initMarkers();
      var mc = new MarkerClusterer( me._map, me.googleMarkers, { imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m' } );
  }

}

interface marker {
    lat: number;
    lng: number;
}

グーグルマップのロードを2回防ぐ方法で、angular2-google-mapsのプロバイダーを使用します
コンポーネント定義にプロバイダーを追加します

import {OnInit, Component  } from '@angular/core';

import { SebmGoogleMap, MapsAPILoader, NoOpMapsAPILoader  } from 'angular2-google-maps/core';

@Component({
    selector: 'site-map',
    templateUrl: './site-map.component.html',
    styleUrls: ['./site-map.component.css'],
  providers: [
    {
      provide: MapsAPILoader, useClass: NoOpMapsAPILoader
    }
  ],
})

テンプレート定義で、ディレクティブを追加する必要があります。

<sebm-google-map #sitemap
  [disableDefaultUI]="false"
  [zoom] = "zoom"
  [zoomControl]="true" 
  [latitude]="lat" [longitude]="lng">
  <!--
  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="openDetail(m)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"

      [markerDraggable]="m.draggable"
      [iconUrl]="'assets/img/marker.png'"
      (dragEnd)="markerDragEnd(m, $event)">

    <sebm-google-map-info-window [disableAutoPan]="true" (infoWindowClose)="onCloseDetail.emit()">
      <h5>{{m.address}}</h5>
      <div>{{m.city}}, {{m.state}}, {{m.country}}</div>
    </sebm-google-map-info-window>    
  </sebm-google-map-marker>
  -->
  <googlemap-directive></googlemap-directive>
</sebm-google-map>

@jpcode
私のソリューションでは、あなたが言ったように、maps sdkが2回ロードされていませんが、これをangular2-google-mapsライブラリに追加する必要があることに同意します。

私はagmlibにできる限り多くのことをさせ、必要な部分を自分でやらせます。

@ siegerx3
実例をzipファイルで共有していただけますか？

@ hellsm83
それで十分なら明日作成します:)
あなたはangular-cliに精通していますか？ それ以外の場合は、基本的なものを実行します。

@ siegerx3
はい、少し...私はグーグルマップapi +マーカークラスターを使用してクラスター化を実行することができました。 代わりに、ソリューションの全体像を把握するために、angular2-google-maps ...を使用したいと思います。
あなたの助けのためにたくさんのtnx

@ hellsm83
https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc

npm installとng serveです。 最初にangular-cliをインストールしていない場合はnpm install angular-cli -g 。

これは最適なソリューションではないことを忘れないでください。 クラスターディレクティブがまだないため、これは私が行った回避策にすぎません。

編集：
アトムが機能していなかったため、フォーマットがおかしいかもしれないので、古き良きエディターを使用していました^^

@ siegerx3
どうもありがとう。 私はこの解決策をチェックします:)

これがAngular2 googleマップに含まれていることに関する更新はありますか？ 私は本当に取り組んでいるプロジェクトにそれを使用する必要があります

@SteveDowsett
あなたはまだ私を含む人々が提供した例の1つを使うことができます:)
もちろんそれで十分なら

@ hellsm83
ところで、すべてがうまくいきましたか？ それはあなたを助けましたか？

@ siegerx3
はい、それは私を大いに助けました。 Tnx！

@ siegerx3

私はあなたの例を自分で使用し、それをうまく機能させたので、称賛に値します！

しかし、今の私の問題は、マーカーを更新できないように見えることです。 ngOnChangesを使用して、更新されたポイントの配列を渡しました。配列が変化しているのがわかりますが、配列が空になってもマーカーは削除されません。

任意のヒント？

@nanomoffet
それが役に立ったことは素晴らしいです！

実際、私は数日前に同じ/同様の問題に遭遇しましたが、解決策を見つける時間がまだありませんでした。

その時何か見つけたらここに投稿します。

永続クラスターの問題の解決策を見つけました。

        .interval(100)
        .take(1)
        .subscribe(() => {
        if(this.markerCluster) {
          this.markerCluster.clearMarkers();
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);

        });

Observableの外部でmarkerClusterを宣言し、最初に存在する場合は、clearMarkers（）という関数を実行して、既存のマーカーを配列に残しますが、マップから削除します（したがって、配列を空にする他のロジック）。

それは私の問題を修正しました、多分それはあなたにも役立つでしょう@ siegerx3

@nanomoffet

もう一度その部分に取り組むときにチェックします、ありがとう:)

こんにちはみんな、このヒントをありがとう
サブコンポーネントを使用してgetNativeMapを取得できました
マップのコンテキストメニューを実装しています
<sebm-google-map> <mapmenu-component></mapmenu-component>
私の場合の問題は、サブコンポーネントテンプレートが表示されないことです
それはhtmlにレンダリングされます
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
これは目に見えないコンポーネントです

原則として、sebm-google-map内にいくつかのhtmlを配置できますか？
OverlayViewを使用せずにhtmlとして使用したい

機能を2つのコンポーネント（ディレクティブ+コンポーネント）に分割することで処理できました
1.）sebm-google-map内にある必要があり、APIアクセサーとして機能するもの
2.）sebm-google-mapの外にある必要があるもの（そうでなければ、生成されたhtmlが表示されないため）

こんにちはチーム、
@ siegerx3私からあなたのコードを使用https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc
それはうまく機能しますが、私は統合することができませんそして。 私が達成しようとしているのは、クラスター+マーカーラベル+情報ウィンドウを統合することです。 したがって、クラスターをクリックすると、個人にマーカーラベルが表示され、クリックすると情報ウィンドウがポップアップ表示されます。 @SebastianMでこれを機能させる方法についてのアイデア

@sprakashg
クラスターはまだモジュールに実装されておらず、モジュールのマーカーを使用していないため、クラスタリングに使用されているのと同じカスタムコンポーネントでネイティブマップAPIを使用する必要があると思います。
つまり、バニラJavaScriptの場合と同じように、ラベルと情報ウィンドウを手動で追加します。

@sprakashg

私は実際にこれと同じことに取り組んでいます。 ライブラリをMarkerClustererPlusに切り替える必要がありました。次のコードを使用して、個々のマーカーとクラスター自体の情報ウィンドウを有効にしています。

        .interval(100)
        .take(1)
        .subscribe(() => {
        if (this.markerCluster) {
          this.markerCluster.clearMarkers();
          this.markers = [];
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon,
                title: 'this is a title'
              });
              marker.addListener('mouseover', function() {
                infowindow.open(map, marker);
              });
              marker.addListener('mouseout', function() {
                infowindow.close(map, marker);
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
            if (this.markerCluster) {
              this.markerCluster.clearMarkers();
            }
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);
          google.maps.event.addListener(this.markerCluster, 'mouseover', function(cluster) {
            let content = 'Cluster Window';
            let info = new google.maps.MVCObject;
            let clusterInfowindow = new google.maps.InfoWindow();

            clusterInfowindow.setContent(content);
            clusterInfowindow.open(map, info);
            clusterInfowindow.setPosition(cluster.getCenter());
            google.maps.event.addListener(map, 'zoom_changed', function() { clusterInfowindow.close(); });
          });

        });

唯一の問題は、クラスターウィンドウを閉じる方法を理解することです。マップを離れると閉じますが、クラスターから離れると閉じません。

角度2でウェイポイントを使用できるが、ここで参照されているようにlatとlngを使用できるかどうかを誰かが知っていますか？「

@naranmistryやりたいことを少し指定できますか？

あなたの計画が正確に何であるかわかりません。 多分誰か他の人が理解していますか？

基本的に、文字列の代わりにlngとlatの値をウェイポイントに入れられるようにしたいのですが、これはangular2-google-mapsを使用して可能ですか？ 経度と緯度の値を使用して、複数の特定の途中降機のあるルートを表示したいので

正しく理解していれば、このモジュールへの接続は表示されませんが、一般的に、ドキュメントを見るとlocation Type: string|LatLng|Placeと表示されています。 そうです、コンストラクターで数値を受け取るgoogle mapsLatLngオブジェクトを使用できます。

それはあなたが必要としたものですか？

基本的には、ドキュメントに記載されているように渡そうとしたのですが、失敗し続けたので、その方法を知りたいと思います。 latとlngを使用したウェイポイントの実用的な例はありますか？

混乱してすみません、もっと明確にすべきです

そうは思いません。 しかし、例としてコードを提供できたら？ プランカーのように、私は私が見つけることができるものを見ることができました:)

さて、私は1つをまとめてみます

ありがとう

申し訳ありませんが、_marker-cluster_ディレクティブ内の_infowindow_で_click event_をインターセプトしたり、各マーカーの_sebm-google-map-info_コンポーネントをレンダリングしたりできますか？

ありがとうございました！

私は同じ問題@fsciutiを持っています。
解決策を見つけましたか？

agm-mapsはまだクラスターをサポートしていないので、 @ siegerx3の例、マーカーの変更の改善、および@nanomoffetのマーカー情報ウィンドウの例を取り上げました。 よくできました！ おかげで、あなたの例は大いに役立ちました。

何かを返すために、次のリンクで@ siegerx3の例の更新バージョンを提供します。

https://drive.google.com/open?id=0B51AX67ezltoOFdSNTQ1NlQ4SU0

次の変更が行われました。

• Angular 4.1と@agm/coreに合うように依存関係を更新しました
• Angular 4.1と@agm/coreに合うようにコードを更新しました
• マーカー変更検出を追加
• 追加されたマーカー情報ウィンドウの例
• 固定コードスタイル

@andorfermichaelたくさんの人に感謝します、あなたは素晴らしいです！ 1つの質問をお願いします：ディレクティブのスタイル（マーカーとクラスターの両方）を外部化したい場合、どのようにすればよいですか？ 単にコンポーネントにすることを考えましたが、あなたが持っているオプションとスタイルでObservableを正しくフィードする方法がわかりません...

@picosam

コンポーネントは必要ありませんが、ES6モジュールを使用するだけです。

新しいファイルを作成し、構成をエクスポートします。次に例を示します。

_google-maps.config.ts_

export const markerIcon = {
  url: '/assets/marker.png', // url
  scaledSize: new google.maps.Size(35, 35)
};

const style = {
  url: '/assets/cluster.png',
  height: 40,
  width: 40,
  textColor: '#FFF',
  textSize: 11,
  backgroundPosition: 'center center'
};

export const options = {
  imagePath: '/assets/cluster',
  gridSize: 70,
  styles: [style, style, style]
};

次に、_marker-cluster.ts_でこれらの変数/モジュールをインポートします。

import { markerIcon, options } from './google-maps.config';

@andorfermichael danke noch mal !!!
もちろん、先に進んで複雑なアイコンを使用することもできます。最新のGoogle Maps Javascriptモジュールバージョンに記載されている内容はすべて正しいですか？

@picosamそう思いますが、まだ試していません

@andorfermichaelこれは注目に値する仕事です👍
しかし、私は少し問題に直面しています

情報ウィンドウをクリックして別のルートにリダイレクトする必要がありますが、情報ウィンドウにクリックイベントがありません。 そこで、代わりに「closeclick」イベントを使用しました。コードは次のとおりです。

infowindow.addListener('closeclick', function () { this.router.navigate(['/blabla', id]); });

すべて正常に動作しますが、情報ウィンドウの閉じるボタンをクリックすると、イベントが呼び出されますが、エラーがスローされます
this.router is undefined

_もちろん、ルーターライブラリはインポートされ、ルーターはコンストラクターで定義されます_

別の手法を試しました。親コンポーネントとディレクティブの間でeventemitter（入力/出力手法）を使用しました。
上部の@Output() eventEmitter = new EventEmitter()をクラス変数として定義しました。
そして同じ場所でのイベント、

infowindow.addListener('closeclick', function () { this.eventEmitter(id); });

また、すべて正常に動作しますが、情報ウィンドウの閉じるボタンをクリックすると、イベントが呼び出されますが、エラーがスローされます
this.eventEmitter is undefined

この問題を修正する方法はありますか？

@ hossam-mauriceエラーの原因はthisだと思います。 あなたの場合のthisは、イベントを発生させた要素であるinfowindowです。 そのため、ES6 / ECMAScript2015では矢印関数が導入されました。 矢印関数の使用thisは、関数の呼び出し方法ではなく、周囲のスコープに依存します。
したがって、 infowindow.addListener('closeclick', () => { this.eventEmitter(id); });が機能するはずです。

詳細については、 ExploringJS-矢印関数およびMDN-矢印関数を参照してください。

@andorfermichaelどうもありがとうございました、それはうまくD👍

こんにちは、私はグーグルドライブからカスタムマーカークラスターを使用しました、そしてそれはうまく働きます。
今、私は1つの問題を抱えています。マーカーをクリックして、ブートストラップモーダルを開く必要があります。 しかし、私はこれをどのように行うことができるのか本当にわかりません。 クリックしてイベントリスナーを使用してアラートを表示しようとしましたが、機能しますが、ブートストラップモーダルをポップする方法がわかりません。 何か案は？

ありがとう:)

こんにちは、情報ウィンドウ内にボタンを追加しましたが、クリックイベントをキャッチできません。その方法について何か考えがありますか？

@andorfermichael
こんにちは解決策をありがとう。 また、その中のマーカーに応じてクラスターの色を変更するのを手伝っていただけませんか。 赤、黄、青など。
敬具

@ vugar005色を変えるとはどういう意味か正確にはわかりません。 必要に応じて、クラスターのイメージを簡単に変更できます。 私の知る限り、Googleのマーカークラスターライブラリは、m1からm5（m =デフォルト）という名前の5つの異なる画像を提供します。これらの画像は、クラスターあたりのマーカーの数が増えるにつれて使用されます。 正確なしきい値はわかりません。 詳細については、 Google DevelopersMapsDocumentationをご覧ください。 したがって、異なる色で5つの画像を作成し、それらにcluster1からcluster5という名前を付けて、assetsフォルダー内に配置することをお勧めします。

@AlexisNiは、infoWindowでdomreadyイベントをリッスンしようとすることができます。このイベントは、

google.maps.event.addListener(infoWindow, 'domready', function() {
  document.getElementById('info-window-button').addEventListener('click', function(){
    // run code here
  });
});

@joaolbaptista申し訳ありませんが、Googleマップマーカーと組み合わせてもBootstrapについてのあなたの質問は私の意見ではトピックから外れています。 stackoverflowで同じ質問（もう少し詳細）をすることをお勧めします;）

@andorfermichael実際には、クラスター内のマーカーの数に応じてアイコンを変更することを意味しました。 そのため、ネイティブのgoogle webapiに切り替えました。 角度マップが将来的にクラスターサービスを提供することを願っています。
とにかくありがとうございました

@ vugar005それが私が説明しようとしたことです。 ネイティブのグーグルマップAPIでさえ、5つの異なる画像の可能性しか提供していません。 これらの各画像は、特定のしきい値に達すると表示されます。たとえば、cluster1（m1）0-10、cluster2（m2）11-100などです。

こんにちは@andorfermichael 、パッケージをアップグレードした後、突然このエラーが発生する理由を

ReferenceError: MarkerClusterer is not defined
    at SafeSubscriber._next (marker-clusterer.ts:106)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/operator/skipWhile.js.SkipWhileSubscriber._next (skipWhile.js:52)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/operator/take.js.TakeSubscriber._next (take.js:80)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at AsyncAction.webpackJsonp.../../../../rxjs/observable/IntervalObservable.js.IntervalObservable.dispatch (IntervalObservable.js:70)

@picosam 。 私は以前にこの問題を抱えていました。 問題は、masterclusterer jsファイルをインポートしなかったか、masterclustererjsファイルがインポートされる前にコードがMasterclustererを使用することです。

どうもありがとう.jsファイルは私の.angular-cli.json含まれており、 .tsファイルにimport * as ...ステートメントがないのは事実です。 もちろん、 importステートメントを手動で追加しようとすると、 .js拡張子が許可されていないというエラーが発生しました。

@picosamどういたしまして。 お役に立ててうれしいです。

この機能は、新しい@ agm / js-marker-clustererパッケージ（＃1044）から利用できます。

@SebastianMこの機能をangular-google-mapsで利用できるようにしていただきありがとうございます。 クラスターのクリックでクリックイベントを機能させようとしていますが、現在は利用できないようです。 同じための回避策はありますか？

@andorfermichaelあなたの例は素晴らしく見えます！ その例を提供してくれてありがとう。 あなたの例では、インデックスページにグーグルマップのAPIを含めようとしていますが、グーグルが見つからない、マーカークラスターが見つからないなどのエラーが発生し続けます。

@jpcodeこんにちは、ソリューションに感謝します。それは機能しますが、ディレクティブを使用すると、agm-markerにある残りの偶数を制御できないという問題があります。 それをagm-markerに追加する方法はありますか？ または、ディレクティブのagm-markerにあるイベントを追加しますか？