Modify sebm-google-map-marker using an angular2 directive

Question

I'm using angular2-google-maps https://angular-maps.com/ to build a google map with markers. What I'm trying to achieve is creating a marker which is customised with an users social media profile pic. I am going to use this: JS Maps v3: custom marker with user profile picture

To do this, i need to modify the marker code which i cannot access.

Template:

<sebm-google-map-marker
  [latitude]="lat"
  [longitude]="lon"
  [appSocialMediaGoogleMapMarker]="'assets/img/temp/profile-image.png'"
  >
</sebm-google-map-marker>

directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { GoogleMapsAPIWrapper, MarkerManager, SebmGoogleMapMarker } from 'angular2-google-maps/core';

@Directive({
  selector: '[appSocialMediaGoogleMapMarker]'
})
export class SocialMediaGoogleMapMarkerDirective {
  @Input('appSocialMediaGoogleMapMarker') socialMediaImage: string;

  constructor(
    el: ElementRef,
    private gmapsApi: GoogleMapsAPIWrapper,
    private markerManager: MarkerManager
  ) {

    this.gmapsApi.getNativeMap().then(map => {
      this.markerManager.getNativeMarker(el.nativeElement).then(marker => {

      });
    });

    console.log(this.socialMediaImage);

  }
}

The error i'm getting is

Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined

which is occuring on this line:

this.markerManager.getNativeMarker(el.nativeElement).then(marker => {

Also this.socialMediaImage if undefined.

Any help would be great, thanks.

Can you make a plunkr? `this.socialMediaImage` is undefined because I don't believe you can do what you do. You need to apply the directive first and then a seperate attribute for the input. — Chrillewoodz, Apr 12 '17 at 09:35
@Chrillewoodz I used this page https://angular.io/docs/ts/latest/guide/attribute-directives.html as a reference and it uses html such as `
`. I'll add a message when I have created a plunkr. — Gavin Bruce, Apr 12 '17 at 12:49
Maybe I'm thinking off functions. Anyway a plunkr will help with the debugging. — Chrillewoodz, Apr 12 '17 at 12:55
@Chrillewoodz I've based this off an existing plunker and added in my directive. https://embed.plnkr.co/kGQ6lIh21kZHXhjrBoPq/ — Gavin Bruce, Apr 13 '17 at 04:14

score 2 · Accepted Answer · answered Apr 14 '17 at 11:02

Also this.socialMediaImage if undefined.

Why do you expect this will not equal undefined? Why?

You're trying to get @Input property inside constructor. You need to use ngOnInit hook to get instantiated input property.

Then you can't get native marker from nativeElement

this.markerManager.getNativeMarker(el.nativeElement)

use the following:

import { SebmGoogleMapMarker } from 'angular2-google-maps/core';

constructor(
  ...
  private sebmMarker: SebmGoogleMapMarker
) {}
...
this.markerManager.getNativeMarker(this.sebmMarker).then...

I created Plunker Example where you can play with it

Modify sebm-google-map-marker using an angular2 directive

1 Answers1