Combining a custom marker image and an arbitrary number string

Question

I have a png that I need to use as my marker, but also, I need to add the numeric sequence into each marker. (Note, I'm using javascript(jQuery) to do this, any other mention of code is for understanding purposes)

I have tried (without any success worth to mention) to use canvas, as in the Android(java) version

private Bitmap writeTextOnDrawable(int drawableId, String text) {

        Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId)
                .copy(Bitmap.Config.ARGB_8888, true);

        Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);
        paint.setTypeface(tf);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(convertToPixels(MapaViagem.this, 11));

        Rect textRect = new Rect();
        paint.getTextBounds(text, 0, text.length(), textRect);

        Canvas canvas = new Canvas(bm);

        //If the text is bigger than the canvas , reduce the font size
        if(textRect.width() >= (canvas.getWidth() - 4))     //the padding on either sides is considered as 4, so as to appropriately fit in the text
            paint.setTextSize(convertToPixels(MapaViagem.this, 7));        //Scaling needs to be used for different dpi's

        //Calculate the positions
        int xPos = (canvas.getWidth() / 2) - 1;     //-2 is for regulating the x position offset

        //"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
        int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 8f)) ;

        canvas.drawText(text, xPos, yPos, paint);

        return  bm;
    }

The code that I got so far is

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        var origin = response.lc.origin.split(', ');
        new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(origin[0]), parseFloat(origin[1])),
            map: map,
            icon: {
                url: "template/img/marker_green.png",
                size: new google.maps.Size(144, 144),
                scaledSize: new google.maps.Size(30, 30),
                anchor: new google.maps.Point(13, 29)
            }
            //icon: createMarker(25, 25, 9)
        });
        var route = response.routes[0];
        for (var i = 0; i < route.legs.length; i++) {

            addMarker(route.legs[i].end_location, i, map, ((i + 1) == route.legs.length));
        }
        directionsDisplay.setDirections(response);
    }
});

function addMarker(routeC, i, map1, is_the_last) {

    var url = "template/img/marker_green.png";
    if(is_the_last){
        var url = "template/img/marker_red.png";
    }

    var beachMarker = new google.maps.Marker({
        position: routeC,
        map: map1,
        icon: {
            url: url,
            size: new google.maps.Size(144, 144),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(13, 29)
        }
    });
}

---

I can't use things like "Google maps: place number in marker?" where is suggested to use the Dynamic Generation of numbers inside the marker.

icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'

And I was looking for some in-built solution not a "google-maps-utility-library(markerWithLabel)", but if there is none then I gladly would accept some help to implement it.

---

Here is my version of the marker using Marker With Label
*Note that this code is only printing the markers as the previous one. the labelContent is not being print at all

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        var origin = response.lc.origin.split(', ');
        var marker = new MarkerWithLabel({
            map: map,
            position: new google.maps.LatLng(parseFloat(origin[0]), parseFloat(origin[1])),
            icon: {
                url: "template/img/marker_green.png",
                scaledSize: new google.maps.Size(30, 30)
            },
            labelContent : 1,
            labelAnchor : new google.maps.Point(13, 29),
            //labelClass : "labels", // the CSS class for the label
            labelInBackground : false
        });
        var route = response.routes[0];
        for (var i = 0; i < route.legs.length; i++) {

            addMarker(route.legs[i].end_location, i, map, ((i + 1) == route.legs.length));
        }
        directionsDisplay.setDirections(response);
    }
});

function addMarker(routeC, i, map1, is_the_last) {

    var url = "template/img/marker_green.png";
    if(is_the_last){
        var url = "template/img/marker_red.png";
    }

    var marker = new MarkerWithLabel({
        map: map1,
        position: routeC,
        icon: {
            url: url,
            scaledSize: new google.maps.Size(30, 30)
        },
        labelContent : i,
        labelAnchor : new google.maps.Point(13, 29),
        //labelClass : "labels", // the CSS class for the label
        labelInBackground : false
    });
}