Angular2 Google Maps style marker

angular, google-maps

Solution

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:

Problem

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?

Original source