Can the Google Maps API base map be used as an overlay above a custom map layer?

Question

Is it possible to use the Google Maps API base map data as an overlay positioned above a custom map layer?

I would like to create a map that uses Google's base water and land/terrain as the bottom layer, and then position a custom data layer above that (red polygonal regions representing my data), and then finally position Google Map's street/boundary/city labels on top of everything.

Is this possible? I tried pushing a Google Maps layer (with only streets/boundaries/cities turned on) onto the overlayMapTypes array, but it seems to force all of the Google Maps layers on top of everything, and my custom layer data (the second layer) is no longer visible.

Answer 1

Here is an example with a custom tile layer as the middle layer:

<script type="text/javascript">
function initMap() {
    // Map with everything off but boundaries
    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        styles: [
            {
                featureType: 'poi',
                stylers: [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'road',
                stylers: [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'transit',
                stylers: [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'landscape',
                stylers: [
                    { visibility: 'off' }
                ]
            },
            {
                elementType: 'labels',
                stylers: [
                    { visibility: 'off' }
                ]
            }
        ]
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    // Middle layer
    var tileLayer = new google.maps.ImageMapType({
        getTileUrl: "tiles URL here",
        tileSize: new google.maps.Size(256, 256),
        isPng: true
    });

    map.overlayMapTypes.push(tileLayer);

    // Top layer with everything off but roads
    var roadsLayer = [
        {
            featureType: 'all',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            featureType: 'road',
            stylers: [
                { visibility: 'on' }
            ]
        }
    ];

    var roadsType = new google.maps.StyledMapType(roadsLayer, { name: 'roads' });
    map.overlayMapTypes.push(roadsType);
}