Text Within Polyline Google Maps V3

Question

I need to be able to put text within my polyline like the embedded Google Maps does as you can see from the below screenshot...

Answer 1

Here is a Post Worth look at, Describing how to add labels to polylines:

http://duncan99.wordpress.com/2013/02/28/google-maps-api-polylines-and-events/

Answer 2

Adding text to polylines is not (currently) supported by the Google Maps Javascript API v3. You will need to create your own custom overlays to implement that. (I doubt you can make the text "follow" the polyline along a curve easily)

Answer 3

I commented yesterday asking if there might be any current way to add text within polylines. I know this question has been resolved, but the last activity I can see was in 2014. I came across this library in github https://github.com/googlemaps/js-map-label

It allows a user to overlay text on the map with (see also examples folder):

    var mapLabel = new MapLabel({
        text: 'Route name',
        position: pointCoordinate,
        map: map,
        fontSize: 12,
        align: 'left',
    });

Note, their source code within the "onAdd" method applies the pane to the map level, meaning the text would be underneath polylines. So, instead, I added it to the floatShadow pane by:

panes.floatShadow.appendChild(canvas);

Instead of:

panes.mapPane.appendChild(canvas);

I was able to make my map look like: