Single tile WMS layer on google maps api v3

Question

I'm trying to add a WMS layer to a google maps map using the google maps api. I was able to do it successfully with a tiled WMS layer using the following code:

var tileSize = new google.maps.Size(256, 256);

var options = {
    'getTileUrl': googleGetTileUrlFunction,
    'tileSize': tileSize,
    'isPng': true
};

var googleWMSLayer = new google.maps.ImageMapType(options);

Where googleGetTileUrlFunction is a function that takes in parameter the coordinates and zoom and returns an url to the WMS request.

However, I need to do add another layer to the same map where the layer is a single image, instead of tiles. Since I couldn't find an object for a single-tile WMS layer in the google maps api, I tried to set a tiled map where the tiles had the size of the viewport. I end up with this result:

It's obviously still tiled, and it's not centered correctly. Is there a way to force the google maps API to draw a single tile at a specified location from a WMS request?

EDIT: Here's a comparison of the WMS layer rendered by google maps versus the image returned by the WMS request: The WMS image is perfectly aligned with the map, you can look at the east coast to see it clearly. I'm looking for a way to display that image on the viewport using the google maps api.

Answer 1

Ground overlays solved my problem. From what I understand, they display an image at specified coordinates on the map.

Instead of creating a google.maps.ImageMapType , I create a new Ground Overlay:

var overlay = new google.maps.GroundOverlay(
    url,
    imageBounds
);

overlay.setMap(gmap);

url is the url of my WMS request and imageBounds is an object describing the coordinates for each side of the image.

Each time I pan or zoom in the map, I remove the previous overlay and replace it with a new one, by generating a new request url, where the bounding box parameter ( BBOX ) is the map's viewport.

For this to work, I had to save both the overlay and the function that generates my WMS url in variables accessible in the function that handles map panning events.

I still have some minor projection issues to fix, but this looks like a valid way to do it.

EDIT: I actually ended up making a custom overlay to fix my projection issue. There's a tutorial here: https://developers.google.com/maps/documentation/javascript/customoverlays