How to overlay lat/lon points on a Google layer in OpenLayers 2?

Question

I'm stuck adding a vector point in lat/lon on top of a Google layer in OpenLayers. The point is moving when I pan the map. This doesn't happen if I replace the Google layer with a layer in WGS84. How can I fix this?

map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gmap = new OpenLayers.Layer.Google(
            "Google Streets", 
            {numZoomLevels: 20}
           );
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

map.addLayers([gmap,pointLayer]);
map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
pointLayer.addFeatures([pointFeature]);

I've tried to follow http://docs.openlayers.org/library/spherical_mercator.html but without success.

Answer 1

You need to add a few changes to get the required results:

1. Add the sphericalMercator: true property to your Google layer so vector layers are shown correctly on top of your Google base layer (this is the reason for the shifting geometry).
2. Add in the maxExtent property of your Google layer, otherwise the centre of the map will not be set correctly. The extent shown below is the extent of the world in Mercator coordinates.
3. As user1795 stated your point geometry has to be reprojected from 4326 to Web Mercator to appear correctly on the map.
4. This also applies to the setCenter LonLat so you need to transform this too.

Working code below:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);

Answer 2

This is a projection problem, you have to transform the projection of the point into that of base layer(google map here). The following code should work

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

    map.addLayers([gmap,pointLayer]);
    map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

    var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
    point.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    pointLayer.addFeatures([pointFeature])

This is because the default projection of google map(spherical mercator) is 900913 and that of a simple point in lonlat in 4326.

Please make sure that the point is set as (longitude,latitude) and not as (latitude,longitude).

Answer 3

When you are working with Google Maps JS API, you should be careful on version. There is default to go with development version Google JS Maps API. Check the page: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

And Google Maps JS team fixing bugs too. Check http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

In future, mention the Google Maps API version in the question. v3.3 didn't have any issues with Openlayers as mostly used by developers.

Answer 4

I think it is a projection issue.

Have you tried reporting the centroid of the point when the map pans? You might be able to see if someting is changing.

But from what i cna see of yuor code, you'd adding WGS84 point to a different corordsys