@ssypi I think it is not possible right now with the given feature set. Can you provide some code snippets of this? Then we can think about how this can be solved

I am also researching this, furthermore changing the pin icon!!!

@SebastianM I haven't had enough time yet to delve deeper into this issue, but one possibility would be to use the markerwithlabel from google-maps-utility-library (sources and docs/examples) or this fork. At a quick glance it seems rather simple to use, though it does need a reference to the map.

@brian-singer the pin icon can be changed by setting the iconUrl property in the marker directive https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMapMarker-directive.html

Right, iconUrl did the trick. @alexweber thanks

InfoWindow can't be styled, if you need custom info window, google maps infobox plugin should be used.
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

Implementation in my project:

Also, to style marker and add custom label, "markerwithlabel" google maps library should be used.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js

Have implemented this on angular1 and native google maps, but I don't know how to implement same logic with angular2 and this plugin. Or I should use googlemaps api directly as in angular1 ?

@ddctd143 You can probably achieve this using a custom component/directive placed inside the map or marker component like mentioned here: https://github.com/SebastianM/angular2-google-maps/issues/307#issuecomment-229084829

I've integrated the above solution in a Plunkr for the Styled Map:

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

But I have yet to figure out to do the same for the marker, as I also need the label with it. When I use styled-marker directive I don't know if I can get the marker instance.

@alexjeen Can you post your problem on stackoverflow ? Some months ago I have rewritten my code to work with this library and google maps. I would answer your question.

Thanks in advance:
http://stackoverflow.com/questions/40087258/angular2-google-maps-style-marker

I am trying to implement MarkerWithLabel following @ddctd143 answer in stackoverflow but getting google not defined error on markerwithlabel.js. Does anyone know how to fix this?

@bibr You should import it as a from bower

Example:

<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>

And to install it with bower use:

"google-maps-utility-library-v3-markerwithlabel": "^1.1.10"

@ddctd143 Is it any difference than this

<script src="assets/markerwithlabel.js"></script>

Do I have to use bower?

Seems like this script is loaded before map. which throws the error. Am I missing something here?

@bibr

Google maps should go before.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>

@ddctd143

Then it will throw
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
since google map is already loaded by angular2-google-maps

@bibr were you ever able to get this working?

@ryan-morris yes, I need to load the map before marker.js so in index.html I have added this

window.onload = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'assets/js/marker.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }

@bibr @ddctd143 Getting error Zone: angular ; Task: Promise.then ; Value: ReferenceError: MarkerWithLabel is not defined when I'm using new MarkerWithLabel. Any ideas into how I can solve this?
`import { Directive, OnInit } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import "../scripts/markerwithlabel.js";

declare const MarkerWithLabel:any;

@Directive({
selector: 'markerlabel-directive'
})

export class MarkerLabelDirective implements OnInit {

private map: any;
constructor(private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit() {
this.gmapsApi.getNativeMap().then(map => {
  // instance of the map.
  this.map = map;
  this.initMap();
});

}

initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 0.75}
 });

 var marker2 = new MarkerWithLabel({
   position: new google.maps.LatLng(49.475, -123.84),
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$395K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 1.0}
 });

 var iw1 = new google.maps.InfoWindow({
   content: "Home For Sale"
 });
 var iw2 = new google.maps.InfoWindow({
   content: "Another Home For Sale"
 });
 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(this.map, this); });
 google.maps.event.addListener(marker2, "click", function (e) { iw2.open(this.map, this); });

}
}`

any updates?

heres 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,
      lng: element.longitude,`

Yes please. MarkerWithLabel seems to be the way to go.
https://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

@nelsonBlack Does the size of the marker increase for you? It doesn't for me, so it isn't very helpful.

@Ammueliza did you get it to work?

Added pull request with this functionality

1392

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I tried to implement this now and failed. Either I get something wrong or this isn't part of the latest release (1.0.0-beta.5)?
ERROR in : Can't bind to 'markerWithLabel' since it isn't a known property of 'agm-marker'.
As far as I understand the code in the PR I need to set this to 'true'.

I tried with:
Angular 7 (not officially supported by the latest release yet)
@agm/[email protected]
[email protected]

Can someone tell me how to get this to work please?

@pueaau Was trying to get this working but the paths are all jacked up https://www.npmjs.com/package/@ajqua/marker-with-label

Created a new repo with the correct paths
https://github.com/braxtondiggs/marker-with-label

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.