Ionic native MarkerCluster


#1

it Is possible create a infoWindow for markers with markerClusterer? if it is possible, someone knows how can i do it? pls, i need help…
my code is below

import { Toast } from ‘@ionic-native/toast’;
import { Component, Input, Renderer, ElementRef, Output, EventEmitter, AfterViewInit } from ‘@angular/core’;
import { Platform } from “ionic-angular”;
import {
GoogleMap, GoogleMapsEvent, GoogleMaps, LatLng, GoogleMapOptions,HtmlInfoWindow, MarkerOptions, Marker, MarkerCluster
} from “@ionic-native/google-maps”;
import { CoordinatesProvider } from ‘…/…/providers/ocorrencias/coordinates/coordinates’;

declare var google: any;

@Component({
selector: ‘google-map’,
template: ‘’,
providers: [
CoordinatesProvider,
]
})

export class GoogleMapComponent implements AfterViewInit {
private mapContainer: HTMLElement;
map: GoogleMap;
myLocation: LatLng;
private isInit: boolean = false;

_height: string = ‘100%’;
@Input()
set height(val: string) {
this._height = val;
this.isInit && this.setHeight();
}

get height(): string {
return this._height;
}

_width: string = ‘100%’;
@Input()
set width(val: string) {
this._width = val;
this.isInit && this.setWidth();
}

get width() {
return this._width;
}

@Input()
options: GoogleMapOptions = {
};

@Output()
mapClick: EventEmitter = new EventEmitter();

@Output()
mapReady: EventEmitter = new EventEmitter();

constructor(
private platform: Platform,
private renderer: Renderer,
private el: ElementRef,
private googleMaps: GoogleMaps,
private coordinates: CoordinatesProvider
) {
this.mapContainer = el.nativeElement;
}

ngAfterViewInit() {
this.setupContainer();
this.platform.ready().then(() => {
this.map = this.googleMaps.create(this.mapContainer, this.options);
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.mapReady.emit(this.map);
this.isInit = true;
this.map.setOptions({
styles[]}
this.map.setMyLocationEnabled(true);
let location = this.map.getMyLocation();
location.then((res) => {
this.myLocation = new LatLng(res.latLng.lat, res.latLng.lng);
this.map.animateCamera({
target: this.myLocation,
zoom: 15,
tilt: 20,
duration: 3000
});
});
// Add Cluster Marker
var label = document.getElementById(“label”);
this.map.addMarkerCluster({
boundsDraw: true,
markers: this.coordinates.getCoordinates(),
icons: [
{min: 2, max: 10, url: “assets/icon/blue.png”, anchor: {x: 16, y: 16}},
{min: 10, max: 20, url: “assets/icon/yellow.png”, anchor: {x: 16, y: 16}},
{min: 20, max: 60, url: “assets/icon/red.png”, anchor: {x: 24, y: 24}},
{min: 60, url: “assets/icon/black.png”,anchor: {x: 32,y: 32}}
],
}).then ((markerCluster) => {
markerCluster.on(“resolution_changed”, function (prev, newResolution) {
var self = this;
label.innerHTML = "<b>zoom = " + self.get(“zoom”).toFixed(0) + ", resolution = " + self.get(“resolution”) + “</b>”;
});
markerCluster.trigger(“resolution_changed”);