Add a label with the special char + - google-maps

Question

I am drawing custom markers on a map and adding labels based on how many people are at that particular address. If there are more than 5 I want to write the label 5+ instead of writing out 23 for example. 1 - 4 work just fine, but I cannot seem to pass the + in a manner that it will display. I do not want to use a static image/marker with the number if I can help it. Anyone done this before?
I have tried this:
var res_label = '5+'
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: img,
label: encodeURIComponent(res_label),
animation: google.maps.Animation.DROP
});
The pin drops but is blank. I tried wrapping the marker var and that didn't work either.

Answer 1

In a URL a + will be used as space, you must encode it: %2B
You should use encodeURIComponent() to encode the entire string(there may be more chars which must be encoded)
window.onload = function() {
document.body.firstChild.data = encodeURIComponent(document.body.firstChild.data);}
^1234567890ß´`?=)(/&%$§"!+*~ÄÖLK_:;-.,Q>%
sample-implementation:
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: {
lat: 0,
lng: 0
}
}),
//note:the dynamic chart-icons are deprecated and may be disabled som day
url = 'https://chart.googleapis.com/chart?' +
'chst=d_bubble_text_small&chld=',
marker = new goo
.Marker({
map: map,
position: map.getCenter(),
icon: url +
encodeURIComponent('bb|text|FFFFFF|000000')
}),
btn = document.createElement('input');
btn.setAttribute('type', 'button');
btn.setAttribute('value', 'push me!');
map.controls[goo.ControlPosition.TOP_CENTER].push(btn);
goo.event.addDomListener(btn, 'click', function() {
var txt;
if (txt = prompt('type a string', 'text')) {
marker
.setIcon(url + encodeURIComponent('bb|' + txt + '|FFFFFF|000000'))
}
})
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
margin: 0;
padding: 0
}
input {
background: tomato;
font-size: 22px;
border-color: tomato;
border-radius: 8px;
padding: 4px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>