Image display/scaling in OpenLayers vs Google Maps

Question

When I plot an image on OpenLayers, it looks like that image is stretched a little bit as compared to Google Maps. I was wondering if it is normal or there is something wrong with my code.

OpenLayers:

Google Maps (maps.google.com):

Following is the XML :

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
    <name>Ground Overlays</name>
    <description>Examples of ground overlays</description>
    <GroundOverlay>
      <name>Large-scale overlay on terrain</name>
      <description>Overlay shows Mount Etna erupting 
          on July 13th, 2001.</description>
      <Icon>
        <href>http://code.google.com/apis/kml/documentation/etna.jpg</href>
      </Icon>
      <LatLonBox>
        <north>37.91904192681665</north>
        <south>37.46543388598137</south>
        <east>15.35832653742206</east>
        <west>14.60128369746704</west>
        <rotation>59.1556640799496235</rotation>
      </LatLonBox>
    </GroundOverlay>


  </Folder>
</kml>

And following is my JavaScript code:

xml=jQuery.parseXML(oRequest.responseText)  //oRequest.responseText contains above xml

    groundOverlays=jQuery(xml).find('GroundOverlay');

    jQuery.each(groundOverlays,function(index, value){
        var groundOverlay=new Object();
        parentFolder=jQuery(groundOverlays).parent('Folder').find('name').text();

        groundOverlay.href=jQuery(value).find('href').text();
        groundOverlay.name=jQuery(value).find('name').text();
        groundOverlay.description=jQuery(value).find('description').text();
        groundOverlay.north=jQuery(value).find('north').text();
        groundOverlay.south=jQuery(value).find('south').text();
        groundOverlay.east=jQuery(value).find('east').text();
        groundOverlay.west=jQuery(value).find('west').text();
        groundOverlay.rotation=jQuery(value).find('rotation').text();



        var options = {   
            'opacity': 1.0, 
            'isBaseLayer': false,
            numZoomLevels : 20 ,
            //aspectRatio:50,

        };
        var image = new OpenLayers.Layer.Image(
            groundOverlay.name,
            groundOverlay.href,
            new OpenLayers.Bounds( groundOverlay.west, groundOverlay.south,  groundOverlay.east, groundOverlay.north),
            new OpenLayers.Size(1, 1),
            options
            );

        map.addLayers([image]);


    });

Answer 1

Spherical Mercator Projection is used for Google Maps API/Bing Map API.

One of the reasons that the Spherical Mercator projection is so important is that it is the only projection which will allow for overlaying image data on top of commercial layers like Google Maps correctly. When using raster images, in the browser, it is not possible to reproject the images in the same way it might be in a ‘thick’ GIS client. Instead, all images must be in the same projection.

How to create Spherical Mercator projected tiles depends on the software you are using to generate your images. MapServer is a possible route.

http://docs.openlayers.org/library/spherical_mercator.html

(See Creating Spherical Mercator Raster Images)

Answer 2

If you look closely, the map itself is also streched, so the image is displayed correctly related to the geographic coordinates in both maps.