Currently, I am utilizing angular2-google-maps to construct a Google map with markers. My goal is to customize a marker by incorporating the user's social media profile picture. To achieve this customization, I plan to refer to the following resource from JS Maps v3: custom marker with user profile picture
In order to implement this feature, I must make alterations to the marker code that I do not have access to.
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);
}
}
An error message stating
Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
is being displayed, and it appears to be originating from this line of code:
this.markerManager.getNativeMarker(el.nativeElement).then(marker => {
In addition, this.socialMediaImage is currently undefined.
Your assistance on this matter would be greatly appreciated. Thank you.