Untitled

<html>
<head>
   <title>OpenLayers Google (v3) Layer Example - demo with styled maps, traffic, fusion tables</title>
   <script src="http://maps.google.com/maps/api/js?V=3.3&sensor=false"></script>
   <script src="http://openlayers.org/dev/OpenLayers.js"></script>
   <script>
var map;
var MY_MAPTYPE_ID = 'usroadatlas';

var roadAtlasStyles = [{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [{
        hue: "#ff0022"
    }, {
        saturation: 60
    }, {
        lightness: -20
    }]
}, {
    featureType: "road.arterial",
    elementType: "all",
    stylers: [{
        hue: "#2200ff"
    }, {
        lightness: -40
    }, {
        visibility: "simplified"
    }, {
        saturation: 30
    }]
}, {
    featureType: "road.local",
    elementType: "all",
    stylers: [{
        hue: "#f6ff00"
    }, {
        saturation: 50
    }, {
        gamma: 0.7
    }, {
        visibility: "simplified"
    }]
}, {
    featureType: "water",
    elementType: "geometry",
    stylers: [{
        saturation: 40
    }, {
        lightness: 40
    }]
}, {
    featureType: "road.highway",
    elementType: "labels",
    stylers: [{
        visibility: "on"
    }, {
        saturation: 98
    }]
}, {
    featureType: "administrative.locality",
    elementType: "labels",
    stylers: [{
        hue: "#0022ff"
    }, {
        saturation: 50
    }, {
        lightness: -10
    }, {
        gamma: 0.9
    }]
}, {
    featureType: "transit.line",
    elementType: "geometry",
    stylers: [{
        hue: "#ff0000"
    }, {
        visibility: "on"
    }, {
        lightness: -70
    }]
}];

var usRoadMapType = new google.maps.StyledMapType(roadAtlasStyles);

var roadatlas = new OpenLayers.Layer.Google("Google US Road Atlas",

        { type: 'usroadatlas'},
        { isBaseLayer: false}


    );

roadatlas.id = 'a';


var gmap = new OpenLayers.Layer.Google("Google Roads",
 { isBaseLayer: false});

var kml1 = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kmls/AirCallMobileCoverage.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true,
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
            },
            { isBaseLayer: false}
             );


function init() {

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher())
    map.addLayers([gmap, kml1, roadatlas]);


    map.setCenter(new OpenLayers.LonLat(-87.650052, 41.850033).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 10);

    map.getLayer('a').mapObject.mapTypeControlOptions = {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    };
    map.getLayer('a').mapObject.mapTypes.set(MY_MAPTYPE_ID, usRoadMapType);

}
</script>
</head>
<body onload="init()">
   <div id="map"></div>
</body>
</html>

Z_INDEX_BASE: {
    BaseLayer: 100,
    Overlay: 325,
    Feature: 725,
    Popup: 750,
    Control: 1000
},

function fixZIndex()
{
    vectorLayer.setZIndex ( olMap.Z_INDEX_BASE[ "Feature" ] );
    markerLayer.setZIndex ( olMap.Z_INDEX_BASE[ "Feature" ] + 1 );
}