Overlaying Image Layer using Openlayers API with Google base map

Question

It is supposed to be like this: I added the layer with this code:

var graphic = new OpenLayers.Layer.Image(
    'Flood Map',
    'https://dl.dropboxusercontent.com/u/75734877/crb_agaton.png',
    new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
new OpenLayers.Size(580, 288), {
    isBaseLayer: false,
    opacity: 0.4,
    projection: map.getProjectionObject(),
    strategies: [new OpenLayers.Strategy.Fixed()],
    maxResolution: "auto"

});

Here's the Fiddle . The problem is (just my guess), I think with its size and projection. It is not "ovelayed" right on Google Base map. How do I adjust the image size based on zoom level? and to "place" it correctly on the base map.

Answer 1

I managed to solve this problem by getting the right bounds of the image and so with its projection.

Here's a sample result .

var graphic = new OpenLayers.Layer.Image(
    'Flood Map',
    'https://dl.dropboxusercontent.com/u/75734877/crb_agaton.png',
new OpenLayers.Bounds(13971275.676953565,1016783.2756971325,13983809.036528133,1022721.9583122506),
...

I got the bounds/extent from GeoServer.