[GIS] Using Google Maps, the mouse cursor and the dot on the map not inline

alignmentgoogle-maps-apiopenlayers-2

I'm trying to implement the example http://openlayers.org/dev/examples/drag-feature.html .

When I'm implementing this with a Google map, I have a strange bug: the mouse pointer and the dot on the map are not in the same place.

Now if I change the line that in bold: map.addLayers([gmap,vectors]); to map.addLayers([wms,vectors]); everything works, (in other words I don't use Google Maps).

Can someone tell me what is happening?

Here is my page and code:

<html>
<head>
<title>OpenLayers: Google Layer Example</title>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" >
   var map;
   var vectors;
   function initialize() {
       // Create the map object
       map = new OpenLayers.Map('map');
        //Create a Google layer
       var gmap = new OpenLayers.Layer.Google(
           "Google Streets", // the default
           {numZoomLevels: 20}
       );
      // if i use this instead of gmap then everything works.
       var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
       var renderer=OpenLayers.Util.getParameters(window.location.href).renderer;
       renderer=(renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
       vectors= new OpenLayers.Layer.Vector("Vector Layer",{
           renderers:renderer
       });
       map.addLayers([gmap,vectors]);
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.addControl(new OpenLayers.Control.MousePosition());
       var control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Path);
       map.addControl(control);
       control.activate();
       // Zoom to Vancouver, BC
       map.setCenter(new OpenLayers.LonLat(-123.12, 49.28), 13);         
  }
</script>
</head>
<body onload="initialize()">
<h1 id="title">OpenLayers: Google Layer Example</h1>
<div id="map" style="width:600px; height:400px" class="smallmap"></div> 
</div>
</body>
<html>

Best Answer

It is not a bug

you need to set the projection correctly if using google maps with openlayers

    var map = new OpenLayers.Map("map", {
  projection: new OpenLayers.Projection("EPSG:900913")
});
var myBaseLayer = new OpenLayers.Layer.Google("Google",
              {'sphericalMercator': true,
               'maxExtent': new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
              });
map.addLayer(myBaseLayer);
var myGML = new OpenLayers.Layer.GML("GML", "mygml.gml", {
  projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(myGML);

You will also need to set your vector layer (drag objects) to the correct projection or it will look offset. Example above uses GML.

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

Related Question