I have an OpenLayers map with a Google base layer and an OpenLayers vector layer on which people can draw their own bounding boxes using the DrawFeature control.

I have found that, as you zoom in, the vector is not plotted covering the same co-ordinates at each zoom level. Rather it seems to zoom at a different ratio to the underlying layer.

Strangely, if I resize the browser window, the vector then stays at a consistent position through all the zoom levels (i.e. becoming larger or smaller but covering the same geographic range, as one would want it to), but slightly offset from the position it was initially drawn at. The remains the case even if I make the browser window full size again.

See example below:

  1. I draw a vector touching the Belgian border. first example

  2. I zoom out and the vector is now well within Germany.

second example

  1. I resize the browser window and the box anchors to a consistent set of co-ordinates but offset from its initial position, now overlapping the Belgian border third example

Please note that this is not the same issue as the vectors scrolling more slowly than the map when dragging the map. The vectors seem to stick to the same area when dragged, but zooming causes them to move relative to the underlying Google layer.

Is this a known issue and can anyone help resolve?

In answer to the question about my initialisation of the layers, my code is as follows:

var miny=-2000000; var minx=6000000; var maxy=600000; var maxx=10003750;

    // allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

//define the layers needed
    g_phys  =   new OpenLayers.Layer.Google("Google Physical",{type: google.maps.MapTypeId.TERRAIN, numZoomLevels:20}, {isBaseLayer:true});
    g_sat   =   new OpenLayers.Layer.Google("Google Satellite",{type: google.maps.MapTypeId.SATELLITE, numZoomLevels:20},{isBaseLayer:true});
    bboxes  =   new OpenLayers.Layer.Vector("Bounding Boxes", {rederers:renderer});

//delete feature on select
bboxes.events.on({"featureselected":function(e){bboxes.removeFeatures(e.feature); erasefeature(e);}});
//refresh on visibility change
//do stuff on modification of vector

//create new set of option for the map
var options = {
            projection: new OpenLayers.Projection("EPSG:3857"),
            units: "m",
            maxResolution: "auto",
            maxExtent: new OpenLayers.Bounds(miny, minx, maxy, maxx),
            theme: null,
            layers: [
                //define the base layers for the map



//create new map object based on "map" div
map=new OpenLayers.Map('map',options);
  • It looks like the projection of the map is not set up properly. Have you set up the projection, resolutions etc properly? Nov 26, 2013 at 2:37
  • @DevdattaTengshe - I don't know if I have set them up properly, but I've followed the examples on the OpenLayers site as closely as I could. I'll edit my question to show the initialisation of the layers.
    – Ambulare
    Nov 26, 2013 at 12:25
  • I've tried and tried, and couldn't reproduce the Issue. If you can post a reproducible example, say on jsfiddle, then it might be easy to find out the cause of the problem. Nov 27, 2013 at 3:16
  • I had the same problem and finally got the solution today. I described it here
    – Le Droid
    Jan 16, 2014 at 2:53
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
    – PolyGeo
    May 31, 2014 at 23:57

2 Answers 2


I must apologise in advance of providing the solution. The problem was being caused by the OpenLayers map container being in a tab of a Jquery-ui tab set and I realise that I had not mentioned this in the initial question.

Because OpenLayers makes an Ajax call to Google Maps, this does not delay execution of subsequent functions. Further down my initialisation functions, jquery-ui was being called to create a tab set and this was causing problems with the correct container size being passed to Google Maps, because the container div was being hidden before the Google Maps initialisation was completed.

As a result, Google Maps was displaying as if the visible window was the wrong size, until the screen was manually resized.

If anyone is finding the same kind of problem, my solution was to place my "init()" function containing the code given in my initial question, in the "tab show" event of the jquery-ui tab widget.

$tabs.bind("tabsshow", function(event,ui){
    if (ui.index==3 && typeof map == "undefined"){init(); }


This appears to have solved the problem, as once the tab content is unhidden, the container size is exposed to Google Maps.

(Note, I believe "tabsshow" is now deprecated and replaced with "tabsactivate" for newer versions of jquery-ui).


I had a similar problem, not rendering OpenLayers with Google Maps, but adding togglable pannels at the side of my OpenLayers map: Whenever the map moved pushed by the toggled pannels, the mouse position was inconsistent with its coordinates, and the boxes I drew in the map with the mouse pointer appeared in the wrong position. I fixed it looking for the javascript code that is called whenever the pannels are toggled, and re-rendering the OpenLayers map whenever this happens, with a call to:


where "map" is Javascript variable that contains the OpenLayers object, and "mapDOMId" is the HTML DOM container of the map (see OpenLayers.Map documentation). I suppose that if you find the javascript code that is triggered whenever you change the zoom level and call map.render() from there, you will solve your problem.

Not the answer you're looking for? Browse other questions tagged or ask your own question.