set a StyledMapType as an overlayMapType - google-maps-api-3

Question

I created a custom StyledMapType and insert it in google.maps.overlayMapTypes in order to draw this custom map upon another layer. Unfortunately, I had this javascript error message:
Uncaught TypeError: Cannot call method 'apply' of undefined main.js:9
(anonymous function) main.js:9
d
L main.js:9
du
H.$
(anonymous function)
Here is the code I execute in my browser:
function initialize() {
var pinkParksStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},
{
featureType: "poi.park",
stylers: [
{ hue: "#ff0023" },
{ saturation: 40 }
]
}
];
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Pink Parks"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Insert styled map in overlayMapTypes.
map.overlayMapTypes.insertAt(0, pinkMapType);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
To see a full example, here is a link on jsfiddle code: http://jsfiddle.net/X5r8r/460/
You can notice in this example that the styled map works as a mapType but not as an overlayMapType.
Thanks,
François

Answer 1

First, I'm not sure why you would want to do this. Wouldn't it be easier to style a base maptype?
https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map
Basically, when you create a maptype to be used in overlayMapTypes it needs to have getTile defined. Check out the documentation here:
https://developers.google.com/maps/documentation/javascript/maptypes#OverlayMapTypes
a StyledMap doesn't expose that.