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 Go
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);
}