Angular2 Google Maps style marker

We are working with Angular2 Google Maps () I've gotten the Styled Google Maps to work already with this Plunkr:

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

  selector: 'styled-map'

export class StyledMap {

  constructor(private _wrapper: GoogleMapsAPIWrapper) {

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

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

        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?


Assuming that you are using 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:


        *ngFor="let cluster of clusters; let i = index"


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:

Later I could create working plnkr.

Result of provided gist should look something like this:

enter image description here

I Dont know which type of google map you are using , i have used primeng GMap where you can customize your marker with marker options like this

new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti", icon: icon})

here you can asign any type of icon to google marker see here

here's a workaround , from google maps API documentation, the label can either be a string or a MarkerLabel object specification, so instead of using string for label, specify the MarkerLabel object and feed it in as a variable eg:

let markerLabelObject = {
color: "red",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
text: element.names
lat: element.latitude,
label: markerLabelObject, //<<----the object you defined 
lng: element.longitude


 ? How do I merge polygons (latitude & longitude)?
 ? Google maps and Angular material design dialog full width
 ? Google maps key with different google play account
 ? Adding Markers in Maps during app is running unsuccessful
 ? toggle button in google map API
 ? Google Places Autocomplete boundaries doesn't always work
 ? I want google maps marker to stay in the centre of the map while camera position can change iOS SDK
 ? Google maps - keep center when zooming
 ? Type 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise<void>'. Ionic 2
 ? Google Map is not showing on live site using Avada theme