CODEWITHSUNDEEP
angulargoogle-mapsgoogle-maps-markers
Adam Adamski
Adam Adamski

Reputation: 767

Angular 4 Google Maps how to add description to marker

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?

Upvotes: 1

Views: 1311

Answers (1)

Leonardo Vizzotto
Leonardo Vizzotto

Reputation: 31

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

Upvotes: 2

Related Questions