1

I am using angular 4 and angular google maps.

I want to add marker with description like that:

enter image description here

Documentation for angular maps is really poor and I couldn't find anything like that.

I know how to add marker but only property it has is title but it is displayed when we move mouse over the marker. What can I do?

Adam Adamski
  • 737
  • 3
  • 11
  • 20
  • You can use technique described in this answer: https://stackoverflow.com/a/45147343/5140781 – xomena Feb 16 '18 at 20:08

1 Answers1

2

The solution I found is not pretty at all but you won't have to use any external api, basically you use the label property to display the text and add some extra spaces in the beginning of the text because since the only properties available to the label are (color, fontFamily, fontSize, fontWeight, text) you can't add a style class to it

let  markerLabel = {
  text: this.stringWithSpaces('King's Cross',15),
  color: 'red'
}

stringWithSpaces(string, n){
  return Array(n).join('\xa0')+string
}

let marker = new google.maps.Marker({
  position: latLon,
  label: markerLabel,
  map: map,
  icon: {...}
});

I haven't done a lot of research on it but if you want you can try using this https://github.com/jesstelford/node-MarkerWithLabel

Leonardo Vizzotto
  • 31
  • 1
  • 4