Angular2 Google Maps style marker

Question

We are working with Angular2 Google Maps (https://angular-maps.com/) I've gotten the Styled Google Maps to work already with this Plunkr:

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

@Directive({
  selector: 'styled-map'
})

export class StyledMap {

  constructor(private _wrapper: GoogleMapsAPIWrapper) {

    this._wrapper.getNativeMap().then((m) => {

      let stylesArray : any = [
         /* your styles here */
      ];

      m.setOptions({       
        streetViewControl: false, 
        styles: stylesArray
      });
    });
  }
}

However now I am looking to do exactly the same with the Marker, I need a label with my marker. When I do it the same way as with the styledMap, I can only get access to the nativeMap with getNativeMap(). But not to the native marker.

Any ideas?

Answer 1

Assuming that you are using https://github.com/SebastianM/angular2-google-maps component to work with google maps.

As google doesn't support markers with labels out of the box, I have created custom component that uses markerwithlabel js library.

Create default "sebm" instance and place custom marker component inside it.

Example of map.component.html template:

<sebm-google-map
        [latitude]="lat"
        [longitude]="lng"
        [zoom]="zoom"
        [disableDefaultUI]="true"
        [zoomControl]="false"
        [streetViewControl]="false">

    <custom-map-marker
        *ngFor="let cluster of clusters; let i = index"
        [markersInCluster]="cluster.markers"
        [addressId]="cluster.address_id"
        [lat]="cluster.coordinates.lat"
        [lng]="cluster.coordinates.lng"
        [label]="cluster.price.raw"
        [isViewed]="true"
        (markerClick)="onMarkerClick($event)">
    </custom-map-marker>

</sebm-google-map>

Where custom-map-marker is my custom component that I have created. I have created gist for you. You will have to cut off un-needed parts of code, and also this was written for RC4, so as from angular RC5 you will have to wrap component into module.

Code of gist:

https://gist.github.com/.../5e00519712fddb8ce206091a5a60e0f3

Later I could create working plnkr.

Result of provided gist should look something like this: