Google Maps: How to draw labels (country, city names, etc.) over my overlay

Question

I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.

For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?

I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.

Is there a working and, well, legal way to do that?

Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/

// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
    return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}

Answer 1

I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:

var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);

Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/