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:

<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",{
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.addControl(new OpenLayers.Control.MousePosition());
       var control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Path);
       // Zoom to Vancouver, BC
       map.setCenter(new OpenLayers.LonLat(-123.12, 49.28), 13);         
<body onload="initialize()">
<h1 id="title">OpenLayers: Google Layer Example</h1>
<div id="map" style="width:600px; height:400px" class="smallmap"></div> 

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)
var myGML = new OpenLayers.Layer.GML("GML", "mygml.gml", {
  projection: new OpenLayers.Projection("EPSG:4326")

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

  • yup thanks. i more or less hacked a solution for now. but for some reason i now get a new problem. I get a white dialogue: Google Maps (c) 2012 ... that appears on the screen. The strangest thing is that this does not happen all the time - just some times. i left a question here: gis.stackexchange.com/questions/26030/… – jenia May 23 '12 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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