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';

@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?


ANSWERS:


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:

<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:

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
}
this.markers.push({
lat: element.latitude,
label: markerLabelObject, //<<----the object you defined 
lng: element.longitude
})


 MORE:


 ? 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