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

den ben dennben78 at yahoo.com
Wed Oct 17 05:57:28 PDT 2012



Hey all,

I'm trying to implement Google's fairly new feature (as of Version 3) for allowing customization of map features (the ability to modify the color/visibility/opacity of map features like water, roads and labels).

I have found the same example websites but all them appear to be 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');
(I apologize if this successfully sent yesterday and is a duplicate but I can find no confirmation it sent looking at the posts and have not gotten any responses). 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20121017/fffa6c22/attachment.html>


More information about the Users mailing list