CODEWITHSUNDEEP
google-mapsangular
Alex
Alex

Reputation: 448

Angular2 Google Maps style marker

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?

Upvotes: 2

Views: 10009

Answers (3)

user991
user991

Reputation: 1369

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:

enter image description here

Upvotes: 8

Nelson Bwogora
Nelson Bwogora

Reputation: 2389

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
})

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86800

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 http://www.primefaces.org/primeng/#/gmap

Upvotes: 0

Related Questions