<html><body><div style="color:#000; background-color:#fff; font-family:times new roman, new york, times, serif;font-size:12pt"><div><br></div><div style="color: rgb(0, 0, 0); font-size: 16px; font-family: 'times new roman', 'new york', times, serif; background-color: transparent; font-style: normal; "><span style="font-size: 12pt; ">Hey all,</span><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt; "><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt; "><div id="yiv1264361273"><div style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-family: 'times new roman', 'new york', times, serif; font-size: 12pt; "><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt; ">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).</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt; "><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">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?</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; "><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">I would greatly appreciate any insight or advice!</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">Thanks,</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">Dennis</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0);
background-color: transparent; font-style: normal; "><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; "><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">Here's some code:</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; ">//yellow water:</div><div style="background-color:transparent;"><div style="background-color:transparent;"><font face="times new roman, new york, times, serif">var stylez = [</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> {</font></div><div style="background-color:transparent;"><font
face="times new roman, new york, times, serif"> stylers: </font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> [</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> { visibility: "on" }</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> ]</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> },</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times,
serif"> {</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> featureType: "water",</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> stylers: [</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> {hue: "#F7E66B"},</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> {saturation: 100}</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif">
]</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> }</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> ];</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"><div style="background-color:transparent;">var _projection = new OpenLayers.Projection("EPSG:4326");</div><div style="background-color:transparent;">var _bounds = new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34);</div><div style="background-color:transparent;"><br></div></font></div></div><div style="background-color:transparent;"><div style="background-color:transparent;"><font face="times new roman, new york, times, serif">var _baseLayers = [</font></div><div style="background-color:transparent;"><font face="times new
roman, new york, times, serif"> new OpenLayers.Layer.Google("TERRAIN", {type: google.maps.MapTypeId.TERRAIN, sphericalMercator:true, 'maxExtent': _bounds}),</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> new OpenLayers.Layer.Google("ROADMAP", {type: google.maps.MapTypeId.ROADMAP, sphericalMercator:true, 'maxExtent': _bounds}),</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> new OpenLayers.Layer.Google("HYBRID", {type: google.maps.MapTypeId.HYBRID, sphericalMercator:true, 'maxExtent': _bounds}),</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> new OpenLayers.Layer.Google("SATELLITE", {type: google.maps.MapTypeId.SATELLITE, sphericalMercator:true, 'maxExtent': _bounds}),</font></div><div
style="background-color:transparent;"><font face="times new roman, new york, times, serif"> new OpenLayers.Layer.Google("TEST", {mapTypeId: google.maps.MapTypeId.TERRAIN, styles: stylez})</font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"> ];</font></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 16px; font-family: 'times new roman', 'new york', times, serif; font-style: normal; "><font face="times new roman, new york, times, serif"><br></font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"><div style="background-color:transparent;">var styledMapOptions = {</div><div style="background-color:transparent;"> name: "Styled Map"</div><div style="background-color:transparent;"> };</div><div style="background-color:transparent;"> var
styledMapType = new google.maps.StyledMapType(stylez, styledMapOptions);</div><div style="background-color:transparent;"><br></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 16px; font-family: 'times new roman', 'new york', times, serif; font-style: normal; "><br></div></font></div><div style="background-color:transparent;"><font face="times new roman, new york, times, serif"><div style="background-color:transparent;">var _map = new OpenLayers.Map({</div><div style="background-color:transparent;"> div: 'my_map_div',</div><div style="background-color:transparent;"> controls:[new OpenLayers.Control.Navigation(),new OpenLayers.Control.ArgParser(),new OpenLayers.Control.Attribution()],</div><div style="background-color:transparent;"> displayProjection: _projection,</div><div style="background-color:transparent;">
maxResolution:'auto',</div><div style="background-color:transparent;"> layers: _baseLayers,</div><div style="background-color:transparent;"> units: "degrees"</div><div style="background-color:transparent;"> });</div><div style="background-color:transparent;"><br></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 16px; font-family: 'times new roman', 'new york', times, serif; font-style: normal; "><br></div><div style="background-color:transparent;"><div style="background-color:transparent;">var test_layer = this.get_layer(_map, 'TEST');</div><div style="background-color:transparent;">test_layer.mapObject.mapTypes.set('styled', styledMapType);</div><div style="background-color:transparent;">test_layer.mapObject.setMapTypeId('styled');</div></div><div style="background-color: transparent; color: rgb(0, 0, 0); font-size: 16px; font-family: 'times new roman', 'new york',
times, serif; font-style: normal; "><br></div></font></div></div></div></div>(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). <br><br> </div> </div> </div></body></html>