[OpenLayers-Users] Using Google styled map base layers in OpenLayers

[den ben]

Hey guys this is a repost. I didn't get any responses. Thought maybe knowing that someone might have an idea or get sudden inspiration to check this out?

I'm trying to implement Google's  map styling feature (google map api v3) which allows customization of map features (the ability to modify the color/visibility/opacity of map features like water, roads and labels).



I have found some example websites but all them are using the ROADMAP maptype. I want to style other map types as well, especially TERRAIN. But when I get the syntax right, and when it  actually works, it always defaults back to the ROADMAP. Has anyone done this?

I would greatly appreciate any insight or advice!
Thanks,
Dennis


Here's some code:
//yellow water:
var stylez = [
            {
                stylers: 
                    [
                        { visibility: "on" }
                    ]
            },
            {
                featureType: "water",
                stylers: [
                    {hue: "#F7E66B"},
                    {saturation: 100}
                ]
            }
        ];
var _projection = new OpenLayers.Projection("EPSG:4326");
var _bounds = new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34);

var _baseLayers = [
    new OpenLayers.Layer.Google("TERRAIN", {type: google.maps.MapTypeId.TERRAIN, sphericalMercator:true, 'maxExtent': _bounds}),
    new OpenLayers.Layer.Google("ROADMAP", {type: google.maps.MapTypeId.ROADMAP, sphericalMercator:true, 'maxExtent': _bounds}),
    new OpenLayers.Layer.Google("HYBRID", {type: google.maps.MapTypeId.HYBRID, sphericalMercator:true, 'maxExtent': _bounds}),
    new OpenLayers.Layer.Google("SATELLITE", {type: google.maps.MapTypeId.SATELLITE, sphericalMercator:true, 'maxExtent': _bounds}),
    new OpenLayers.Layer.Google("TEST", {mapTypeId: google.maps.MapTypeId.TERRAIN, styles: stylez})
  ];

var styledMapOptions = {
        name: "Styled Map"
    };
  var styledMapType = new google.maps.StyledMapType(stylez, styledMapOptions);


var _map = new OpenLayers.Map({
      div: 'my_map_div',
      controls:[new OpenLayers.Control.Navigation(),new OpenLayers.Control.ArgParser(),new OpenLayers.Control.Attribution()],
      displayProjection: _projection,
      maxResolution:'auto',
      layers: _baseLayers,
      units: "degrees"
    });


var test_layer = this.get_layer(_map, 'TEST');
test_layer.mapObject.mapTypes.set('styled', styledMapType);
test_layer.mapObject.setMapTypeId('styled');
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20121019/0c80ec3e/attachment-0001.html>