geoserver and tiger roads layer overlay problem

Question

Been playing with open layers, geoserver and the tiger roads shapefile but cannot get it to line up correctly over new york. I have looked online and followed the instructions regarding setting the projections and setting google maps to sphericalmercator = true however it still doesnt line up correctly. Any ideas?

        var map;
        var untiled;
        var tiled;
        var pureCoverage = false;
        // pink tile avoidance
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        // make OL compute scale according to WMS spec
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        function init(){
            format = 'image/png';

            var bounds = new OpenLayers.Bounds(
                -20037508, -20037508,
                20037508, 20037508.34
            );

            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                maxExtent: bounds,
                //maxResolution: 0.00075764453125,
                units: 'm'
            };

           map = new OpenLayers.Map('map', options);

           var GoogleMap = new OpenLayers.Layer.Google(
                "Google Satellite", {
                type: G_SATELLITE_MAP,
                maxZoomLevel: 30,
                "sphericalMercator": true
                }
           );  

            // setup tiled layer
            wmsLayer = new OpenLayers.Layer.WMS(
                "tiger_roads - Tiled", "http://localhost:8080/geoserver/wms",
                {
                    layers: 'tiger:tiger_roads',
                    styles: '',
                    format: format,
                    tiled: 'true',
                    transparent:'true',
                    isBaseLayer: false
                }
            );

            map.addControl(new OpenLayers.Control.MouseDefaults()); 
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.ZoomBox({alwaysZoom:true}));
            // Coordinate display at bottom of map
            map.addControl(new OpenLayers.Control.MousePosition()); 
            map.addLayers([GoogleMap, wmsLayer]);

           var point = new OpenLayers.LonLat(-73.96543, 40.78885); 
           // Need to convert zoom point to mercator too
           point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
           map.setCenter(point, 12); 

      } 

Answer 1

You should include proj4js library to your project. Did you? If not, see the userguide and that wiki page for instructions.

Answer 2

In Google Maps, there are slightly difference in between satellite and streetmap. Could you try with streetmap whether it match with layer. I tried GeoServer tiger roads with openstreet maps and it looks fine.

Note that for Google maps integration with GeoServer, Openlayers alone is enough at client side.