Angualr2 Override Service used in another module

Question

I am importing a third party module into my application. The module has a directive that I want to use. I need to be able to modify a service that the directive uses.

My goal is to get sebm-google-map-marker to use CustomWrapper instead of GoogleMapsAPIWrapper

import {
  Component,
  Injectable,
  NgModule,
  NgZone
} from '@angular/core';

import {
  BrowserModule
} from '@angular/platform-browser';

import {
  AgmCoreModule,
  MapsAPILoader,
  GoogleMapsAPIWrapper
} from 'angular2-google-maps/core';




// todo: add types for this
declare var google: any;

/**
 * Wrapper class that handles the communication with the Google Maps Javascript
 * API v3
 */
@Injectable()
export class CustomWrapper extends GoogleMapsAPIWrapper {


  constructor(private _loader: MapsAPILoader, private _zone: NgZone) {
    super(_loader, _zone);
  }

  /**
   * Creates a google map marker with the map context
   */
  createMarker(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):
      Promise<mapTypes.Marker> {
        console.log('made it');
    return this._map.then((map: mapTypes.GoogleMap) => {
      options.map = map;
      return new google.maps.Marker(options);
    });
  }

}

@Component({
  selector: 'my-app',
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  template: `
    <sebm-google-map 
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="false"
      (mapClick)="mapClicked($event)">

      <sebm-google-map-marker 
         *ngFor="let m of markers; let i = index"
          (markerClick)="clickedMarker(m.label, i)"
          [latitude]="m.lat"
          [longitude]="m.lng"
          [label]="m.label"
          [markerDraggable]="m.draggable"
          (dragEnd)="markerDragEnd(m, $event)">

        <sebm-google-map-info-window>
          <strong>InfoWindow content</strong>
        </sebm-google-map-info-window>

      </sebm-google-map-marker>

      <sebm-google-map-circle [latitude]="lat + 0.3" [longitude]="lng" 
          [radius]="5000"
          [fillColor]="'red'"
          [circleDraggable]="true"
          [editable]="true">
      </sebm-google-map-circle>

    </sebm-google-map>
`})
export class App {
  // google maps zoom level
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'B',
          draggable: false
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'C',
          draggable: true
      }
  ]
}
// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
}

@NgModule({
  imports: [ BrowserModule, AgmCoreModule.forRoot() ],
  providers: [ CustomWrapper ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

plunkr of setup