Multiple Circles are not removed, though correctly created

[cronosxfiles]

Issue description

I have several circles on the map related to a list of search results. With every new search, I pretend to remove all circles and draw new ones. But all created circles from all searches remain on the map.

Steps to reproduce and a minimal demo of the problem

On the template, I have:

<sebm-google-map class="sebm-google-map-container"
            [latitude]="googleMapService.latitude"
            [longitude]="googleMapService.longitude"
            [zoom]="googleMapService.zoom"
            [scrollwheel]="false">
            <styled-map></styled-map>

            <sebm-google-map-marker 
                *ngFor="let marker of googleMapService.markers"
                [latitude]="marker.latitude"
                [longitude]="marker.longitude"
                [label]="marker.label"
                [markerDraggable]="marker.draggable"                
                [iconUrl]="marker.iconUrl"
                >       
                <sebm-google-map-info-window>
                    <p>{{marker.info}}</p>
                </sebm-google-map-info-window> 
            </sebm-google-map-marker>

            <sebm-google-map-circle 
                *ngFor="let circle of googleMapService.circles"
                [latitude]="circle.latitude"
                [longitude]="circle.longitude"
                [radius]="circle.radius"
                [fillColor]="circle.fillColor"
                [circleDraggable]="circle.circleDraggable"
                [editable]="circle.editable"
            ></sebm-google-map-circle>

        </sebm-google-map>

and, on the component/service class:

export class GoogleMapService   {
    latitude: number = 41.387;
    longitude: number = 2.169;
    zoom: number = 4;
    markers: GoogleMapMarker[] = [];
    circles: GoogleMapCircle[] = [];

    constructor()   {
        console.log('New GoogleMapService instance created.');
    }

    cleanUpMarkers()    {
        this.markers = [];
    }

    cleanUpCircles()    {
        this.circles = [];
    }

    cleanUpAllObjects()    {
        this.cleanUpMarkers();
        this.cleanUpCircles();
    }

    addMarker( newMarker: GoogleMapMarker ) {
        this.markers.push( newMarker );
    }

    addCircle( newCircle: GoogleMapCircle )  {
        this.circles.push( newCircle );
    }

}

// just an interface for type safety.
export interface GoogleMapMarker {
    latitude: number;
    longitude: number;
    label?: string;
    draggable: boolean;
    iconUrl?: string;
    info: string;
}

// just an interface for type safety.
export interface GoogleMapCircle {
    latitude: number;
    longitude: number;
    radius: number;
    fillColor: string;
    circleDraggable: boolean;
    editable: boolean;
}

Of course, I use different classes that implement the marker/circle interfaces and provide all the required values.
Everything works OK with markers. You may add as many as you wish and then remove them with a call to cleanUpMarkers(). But a call to cleanUpCircles() doesn't have the expected result. The circles remain painted on the map.
Not sure if I'm doing something wrong or if it's an issue.

angular2 & angular2-google-maps version

• Angular: v2.0.0-rc.5
• angular2-google-maps: v0.13.0

[cronosxfiles]

I've tried to reproduce the situation based on a clone of your example Plunker with no luck. Check it here: http://plnkr.co/edit/XTiZKF?p=preview. I get these errors:

• Unhandled Promise rejection: Zone.assertZonePatched is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: Zone.assertZonePatched is not a function - zone.js (line 461)
• Error: Uncaught (in promise): TypeError: Zone.assertZonePatched is not a function

[cronosxfiles]

Right now, I don't know how to make a PR from a fork on my account. I'll be attaching the two (IMHO) required modifications for this issue to be solved:

• /src/core/directives/google-map-circle.ts
• /src/core/services/managers/circle-manager.ts

google-map-circles.PR.zip

Haven't had the change to make any test. Hope it helps.

[sebholstein]

@cronosxfiles thanks for the report. Bugfix will be in the next release

[cronosxfiles]

I'm so grateful @SebastianM! Thanks a lot! Love this component as it has saved me lots of work at my job.

[sebholstein]

@cronosxfiles Thank you for the kind words!