Angular-google-maps: How to use a Marker Clusterer?

no sorry, I have no advice I could give you right now

@SebastianM I think it can be done with access to the map object, see here please: https://github.com/SebastianM/angular2-google-maps/pull/311

Has anybody actually done this? the markerclusterer js files do not seem to like the map object that I pass in from .getMap()

@AbdulTheProgrammer I've been waiting on this to get in, my biggest hope is that it'd work? You sure you called getMap() on the same instance of the GoggleMapsAPIWrapper service as the one used by the map directive, that's my biggest issue at the moment....

I've achieved it using a custom component and including it inside the sebm-google-map; it uses the GoogleMapsAPIWrapper and the nativeMap.

I add the markers manually using the google maps javascript api (window.google.maps) and then creating the MarkerClusterer.

I hope it helps.

@ricardojbertolin That does help, like Sebastian had pointed out here #311, a custom component inside the map is exactly how to get access to the native map object, although surely there's gotta be a better way to add the markers using the manager service as opposed to doing it manually via the js api...

I am also struggling to get js-marker-clusterer working. I get a reference to the native maps instance, however I also need references to the native map markers. Anyone any ideas how a can get the native map markers for my <sebm-google-map-marker>s?

@alexweber
Do you have an example for the custom component and the GoogleMapsApiWrapper?
I don't seem to understand what "placing a custom component inside the component" means.

@siegerx3 It's simpler that it sounds, first create a custom component or directive:

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

I used a directive cause I didn't need a template, you can use a component and specify one if you want.

Goes without saying you need to specify your custom component/directive in the directives section of the component where you're using it. Now just drop your component inside the map:

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

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

Due to the way Angular2 DI works, since we're not specifying a provider for the GoogleMapsAPIWrapper service, it will go up the component tree until it finds one. In this case, it's 1 step up and we use the GoogleMapsAPIWrapper that was provided in the sebm-google-map component

@jfmaeck There's a getNativeMarker() method on the MarkerManager service that you can use for that, and you can obtain the same marker manager service instance using the method described above for the wrapper.

@alexweber
Seeing the code, the explanation makes sense now! Thanks :)

@alexweber thank you very much for your hint on how to get the native marker instance. I still have one question, though: the getNativeMarker() method of the MarkerManager expects a SebmGoogleMapMarker instance (the marker component) as its parameter. Do you know how I can grab this component in a variable to pass it to the getNativeMarker function?

@jfmaeck No problem! I can't check to be 100% sure at the moment but you can probably just use @ViewChild('myMarker'): SebmGoogleMapMarker in your component and reference it with a # in the markup: <sebm-google-map-marker #myMarker> just remember ViewChild only correctly resolves in ngAfterViewInit.

@alexweber thank you again for your help. Unfortunately, I could not manage to access the markers using @ViewChildren. I forked the demo on Plunkr and made some changes to it so that the ViewChildren result gets logged in the console (an empty array at the moment):

markers after view init []

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

I guess you are pretty busy but if you have a chance to look at it, I would really appreciate that.

@jfmaeck when you use @ContentChildren (because you want to get the instances that live inside your component element), it works: http://plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp?p=preview

@jfmaeck You were close, here's a working fork of your plunk with @ViewChildren: http://plnkr.co/edit/rJMCFoX9GokturcJljLh?p=preview

To get it to work using the custom map component @ContentChildren (like @SebastianM pointed out) would work but I assume you only created it to get access to the markers and it's not really necessary to have that extra component in the first place.

Thank you very much @SebastianM and @alexweber!

@alexweber @SebastianM First of all, how do I include this library which you use js-marker-clusterer? Is there a way to use clusters on a specific zoom-level? And how do I include images for the clusters like this: http://i65.tinypic.com/10gxkcw.png

@ricardojbertolin any chance you can share your code? I'm very new to angular2 (have been working with angularjs for a year+) and I'm a bit lost.

@alexweber , Did you test adding markerclusterer.js ? any example related?

@jpcode sorry nope, haven't worked on this in a while...

I have a working solution in one of my projects.
If needed i can put together a plunkr with an example?
@jpcode
@alexweber

@siegerx3 nice, will help a lot.
i'm working in alternative just using google maps api + markerclusterer.js.

@siegerx3 , this is a basic example just using google maps lib:
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

POC pending:
In the way to use angular2-google-maps, i think need to be added inside to prevent collision with global objects as "google".
A workaround will be prevent load google from lib.
provide(MapsAPILoader, {useClass: NoOpMapsAPILoader}) and load by yourself and add clusterer.js.

But is better if angular2-google-maps add a directive to support clusterer :)

@jpcode
I spent hours trying to get it to work in plunker...without any success.
Always got some errors unrelated to the issue.
So i will just show you the code here...

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

You put this directive into the angular2-google-maps tag:

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

@siegerx3 , i made a POC using angular2-google-maps

Approach:

• Add google maps from index.html
• import clusterer.js
• prevent load google maps lib from angular2-google-maps ( using provider )
• Add a directive to get the orignal map instance from lib
• use google/markercluster variables to use as global

You can also will use the other directives from angular-2-google-maps, but i think is better if something is added to the lib to support clusterer.
-- >

because not make sense to use this lib to paint a map and next just use google maps, in this case i think is better use just google maps libs + clusterer.js as a before plunkr shows.

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

In the way to prevent load google maps twice use a provider from angular2-google-maps
in your component definition add a provider

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
    }
  ],
})

In your template definition you need to add the directive.

<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
I agree that this should be added to the angular2-google-maps library, though in my solution the maps sdk is not loaded twice, just as you mentioned.

I just let the agm lib do as much as it can and just do the necessary parts myself.

@siegerx3
can you please share a working example in a zip file?

@hellsm83
I'll create one tomorrow if that's enough for you :)
Are you familiar with angular-cli? Otherwise i'll just do a basic one.

@siegerx3
yes, a little... i was able to execute clusterization using google maps api + marker clusterer. i would prefer to use, instead, angular2-google-maps... in order to have a complete view of the solution.
tnx a lot for your help

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

Just npm install and ng serve. If you don't have angular-cli installed npm install angular-cli -g first.

Remember, this is not the optimal solution. It's just a workaround i made because there is no cluster directive yet.

edit:
formatting might be weird since my atom was not working, so i was using the good old editor^^

@siegerx3
thanks a lot. i'll check this solution :)

Is there any update on this being included into angular 2 google maps? I really need to use it for a project im working on

@SteveDowsett
You can still use one of the examples people including me have provided :)
If it's sufficient for you of course

@hellsm83
Btw did everything work? Did it help you?

@siegerx3
Yes, it helped me a lot. Tnx!

@siegerx3

I used your example myself, and got it working great, so kudos!

But my issue now is I can't seem to get the markers to update. I used ngOnChanges to pass in an updated array of points, and I can see the array changing, but when the array becomes empty the markers aren't removed.

Any tips?

@nanomoffet
Great that it helped!

Actually i ran into the same/ a similar issue a few days ago but i didn't have the time yet to find a solution.

I will post here when i found something then.

I found a solution for the persistent clusters issue.

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

        });

I declared markerCluster outside of the Observable, and then if it exists at the start it runs a function called clearMarkers() that will remove any existing markers from the map, though it leaves them in the array (hence the other logic to empty the array).

That fixed my issue, maybe it'll help you too @siegerx3

@nanomoffet

I'll check it out when i work on that part again, thanks :)

hi guys, thanks for this hints
i managed to get the getNativeMap by using a subcomponent
i am implementing a map context menu
<sebm-google-map> <mapmenu-component></mapmenu-component>
the problem in my case is that the subcomponent template is not visible
it is rendered into the html into
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
which is an invisible component

am i able to place some html inside the sebm-google-map in principle?
i would like to have it as html, not using OverlayView

i was able to handle it by separating the functionality into 2 components (directive + component)
1.) one that has to be inside sebm-google-map and serves as api accessor
2.) one that has to be outside sebm-google-map (because otherwise i dont see its generated html)

Hi Team,
@siegerx3 I used your code from https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc
it works great, but I'm unable to integrate and . What I'm trying to achieve is , integrating cluster+marker label + info window. So, that when I click on cluster, the individuals should have marker label and on click on it should pop up a info window. Any idea how I can get this working @SebastianM

@sprakashg
I think since the cluster is not implemented in the module yet and you are not using the markers from the module, you have to use the native maps api in the same custom component that is used for the clustering.
Meaning, adding the label and info window manually as you would do in vanilla javascript.

@sprakashg

I'm actually working on this same thing myself. I had to switch to MarkerClustererPlus for the library, and I'm using the following code to enable info windows for individual markers as well as the clusters themselves:

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

        });

The only issue is figuring out how to close the cluster windows - they close when you leave the map but not when you leave the cluster.

Does anyone know whether we can use waypoints in angular 2 but using lat and lng as referenced here "https://developers.google.com/maps/documentation/javascript/reference#DirectionsWaypoint"?

@naranmistry can you specify a bit what you want to do?

i don't see what exactly your plan is. Maybe someone else understands?

Basically I want to be able to put lng and lat values into the waypoint instead of a string, is this possible using angular2-google-maps ? As I want to display a route with multiple specific stop overs using longitude and lattidute values

If i understand correctly, then i don't see the connectino to this module, but in general, if you look at the documentation it says location Type: string|LatLng|Place. So yes you can use the google maps LatLng object which takes the numeric values in it's constructor.

Is that what you needed?

Basically I want to know how, as I tried to pass it in as the documentation says but It kept failing. Is there a working example of waypoints using lat and lng?

Sorry for the confusion I shoulda been more clearer

I don't think so. But if you could provide your code as an example? Like in a plunkr, i could see what i can find :)

Okay i'll try and put one together

Thanks

Sorry, can i intercept _click event_ in a _infowindow_ inside _marker-cluster_ directive or rendere an _sebm-google-map-info_ component for each markers?

Thank you!

I have the same issue @fsciuti.
did you find a solution ?

Since agm-maps does still not support clusters I took the example of @siegerx3, the improvement on marker changes and the marker info windows example of @nanomoffet. Good work! Thanks, your examples helped a lot.

To give something back, I provide a updated version of @siegerx3 example under the following link:

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

The following changes have been made:

• updated dependencies to fit Angular 4.1 and @agm/core
• updated code to fit Angular 4.1 and @agm/core
• added marker change detection
• added marker info window example
• fixed code style

@andorfermichael Thanks a bunch man, you're great! One question please: if I want to externalize the styling of the directive (both markers and clusters), how should I do so? I thought about simply making it a component, but then I don't know how to feed the Observable correctly with the options and style that you have...

@picosam

You do not need a component instead just use ES6 modules.

Create a new file and export the configuration, for example:

_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]
};

and then in _marker-cluster.ts_ import those variables/modules:

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

@andorfermichael danke noch mal!!!
Of course I can then go ahead and use complex icons and all what's documented in the latest Google Maps Javascript module version, correct?

@picosam I think so but have not tried that yet

@andorfermichael This is a remarkable job 👍
but I am facing a little problem

I need to redirect to another route by a click on the infowindow, but infowindow doesn't have a click event. So I used instead the "closeclick" event, here is the code

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

Everything works fine but when I click on the infowindow close button, the event is called but it throws an error
this.router is undefined

_Of course the router library is imported and the router is defined in the constructor_

I tried another technique, I used the eventemitter (the Input/Output technique) between the parent component and the directive.
I defined the @Output() eventEmitter = new EventEmitter() at the top as a class variable,
And the event in the same place,

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

Also everything works fine but when I click on the infowindow close button, the event is called but it throws an error
this.eventEmitter is undefined

Is there a way to fix this issue?

@hossam-maurice I suppose that the error is caued by the this. The this in your case is the element which fired the event - the infowindow. For that reason, arrow functions have been introduced in ES6/ECMAScript2015. Using arrow functions the this does not depend on how the function was called but on the surrounding scope.
So infowindow.addListener('closeclick', () => { this.eventEmitter(id); }); should work for you.

For further reference have a look at: ExploringJS - Arrow Functions and MDN - Arrow Functions

@andorfermichael Thank you so much, it did work :D 👍

Hello, i used the custom marker cluster from google drive and it works just fine.
Now i do have one problem, i need to click in a marker and open a bootstrap modal. But i don't really know how am i able to do this. i tried to use a event listener on click and show an alert and it works, but i don't really know how to pop a bootstrap modal. Any ideas?

Thanks :)

Hello,i added a button inside info window but i am unable to catch the click event.Do you have any idea on how to do it?

@andorfermichael
Hi thank you for solution. Could you please also help to change cluster colors according to markers inside it. Such as red,yellow and blue.
Kind Regards

@vugar005 I do not understand exactly what you mean by changing the color. You could simply change the image of the cluster according to your needs. As far as I know, Google's marker cluster library provides five different images named m1 to m5 (m = default) which are used as the number of markers per cluster grows. I do not know the exact thresholds. More information at Google Developers MapsDocumentation. So, I would suggest to create five images with different colors and naming them cluster1 to cluster5 and placing them inside the assets folder.

@AlexisNi you could try to listen to the domready event on the infoWindow which is is fired when the

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

andorfermichael on 15 Aug 2017