Add a wmslayer in gmaps

[whazaaa]

I had some trouble adding a wmslayer to gmaps here is my solution.
Most difficult was calculating bbox for position tile.
It's a bycicle map of the netherlands.

        var map;
        var width = 500;
        var height = 400;
        $(document).ready(function() {
            map = new GMaps({
                el : '#map',
                lat : 51.8353,
                lng : 4.9718
            });

            var getTile = function(coord, zoom, ownerDocument) {
                var div = ownerDocument.createElement('div');

                var bbox = calculateBBOX(coord,zoom);

                div.innerHTML = '<img src="http://geodata.nationaalgeoregister.nl/fietsknooppuntennetwerk/wms?LAYERS=netwerken%2Cknooppunten&TRANSPARENT=true&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG%3A900913&amp;BBOX='+bbox+'&WIDTH=256&HEIGHT=256" style="width: 256px; height: 256px; position: relative; opacity: 0.6;">';
                div.style.width = this.tileSize.width + 'px';
                div.style.height = this.tileSize.height + 'px';
                div.className = "wmslayer";
                return div;
            };

            map.addOverlayMapType({
                index : 0,
                tileSize : new google.maps.Size(256, 256),
                getTile : getTile
            });

        });

        function calculateBBOX(coordinates,zoomlvl){
                var bbox = '479406.21274558,6807170.2079419,484298.18255515,6812062.1777515';

                var lULP = new google.maps.Point(coordinates.x*256,(coordinates.y+1)*256);
                var lLRP = new google.maps.Point((coordinates.x+1)*256,coordinates.y*256);

                var projectionMap = new MercatorProjection();

                var lULg = projectionMap.fromDivPixelToSphericalMercator(lULP, zoomlvl);
                var lLRg  = projectionMap.fromDivPixelToSphericalMercator(lLRP, zoomlvl);

                var lUL_Latitude = lULg.y;
                var lUL_Longitude = lULg.x;
                var lLR_Latitude = lLRg.y;
                var lLR_Longitude = lLRg.x;
                //GJ: there is a bug when crossing the -180 longitude border (tile does not render) - this check seems to fix it
                if (lLR_Longitude < lUL_Longitude){
                    lLR_Longitude = Math.abs(lLR_Longitude);
                }
                bbox= lUL_Longitude + "," + lUL_Latitude + "," + lLR_Longitude + "," + lLR_Latitude;
                return bbox;
        }

        function bound(value, opt_min, opt_max) {
            if (opt_min != null) value = Math.max(value, opt_min);
            if (opt_max != null) value = Math.min(value, opt_max);
            return value;
        }

        function degreesToRadians(deg) {
            return deg * (Math.PI / 180);
        }

        function radiansToDegrees(rad) {
            return rad / (Math.PI / 180);
        }

        function MercatorProjection() {
            var MERCATOR_RANGE = 256;
            this.pixelOrigin_ = new google.maps.Point(
            MERCATOR_RANGE / 2, MERCATOR_RANGE / 2);
            this.pixelsPerLonDegree_ = MERCATOR_RANGE / 360;
            this.pixelsPerLonRadian_ = MERCATOR_RANGE / (2 * Math.PI);
        };

        MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
            var me = this;

            var point = opt_point || new google.maps.Point(0, 0);

            var origin = me.pixelOrigin_;
            point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
            // NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
            // 89.189.  This is about a third of a tile past the edge of the world tile.
            var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
            point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
            return point;
        };

        MercatorProjection.prototype.fromDivPixelToLatLng = function(pixel, zoom) {
            var me = this;

            var origin = me.pixelOrigin_;
            var scale = Math.pow(2, zoom);
            var lng = (pixel.x / scale - origin.x) / me.pixelsPerLonDegree_;
            var latRadians = (pixel.y / scale - origin.y) / -me.pixelsPerLonRadian_;
            var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
            return new google.maps.LatLng(lat, lng);
        };

        MercatorProjection.prototype.fromDivPixelToSphericalMercator = function(pixel, zoom) {
            var me = this;
            var coord = me.fromDivPixelToLatLng(pixel, zoom);

            var r= 6378137.0;
            var x = r* degreesToRadians(coord.lng());
            var latRad = degreesToRadians(coord.lat());
            var y = (r/2) * Math.log((1+Math.sin(latRad))/ (1-Math.sin(latRad)));

            return new google.maps.Point(x,y);
        };

[smolleyes]

thanks :)