[GIS] Using Google Maps layers with setCenter and transform in OpenLayers

Question

I have been doing everything in just OpenLayers and has been going great. I have been using markers, vectors, bringing in JSON data via php, and some ajax.

Everything has been in one layer in regards to the LayerSwitcher() control.

Now I would like to add a different layer (so, another layer in the LayerSwitcher control) that uses Google Maps as the background. Whether it ends up being hybrid/street/physical is not an issue right now.

When defining layers, many OL examples I see set layers as an array in the map object. This is ok but I would rather just define them separately via var. For example:

var layer1 = new OpenLayers.Layer.MapServer( "My layer that has been working well",    
"mapserv.exe url", {map: '/mapfile_dir', layers: ['ex1', 'ex2] }, {singleTile: true});

var layer2 = new OpenLayers.Layer.Google("Google Layer that is troublesome",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20})

The goal:

Up to this point I've been using layer1 with vectors/markers and all has been working well. Everything that is working well in layer1 needs to work exactly the same in layer2.

I'd like the functionality of layer1 (with all the working vectors/markers/ajax/json) to be the same in layer2 i.e. the only real difference will be the map itself (whether it be Google Hybrid/Physical/Street)

I've been reading about .transform and it seems more fickle than initially anticipated, so I just tried to add the 2 above basic layers, using a setCenter as a test to see if the center would come up the same for both layers.

The code for that simple test:

var map;

function init() {
  map = new OpenLayers.Map('map', {
});     
var glayer =  new OpenLayers.Layer.Google("Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20})
var ilayer = new OpenLayers.Layer.MapServer("Interactive",
"url//mapserv.exe", {map: '/mapfile', layers: ['layershere'] }, {singleTile: true});
    
map.addLayers([glayer, ilayer]);
var lonLat = new OpenLayers.LonLat(-82, 28).transform(new  
OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, 7);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}

If I do just the glayer by itself, everything is fine: setCenter works. Now when I add in ilayer (as the second layer) it just comes up as a black map when I switch to it.

If I do the ilayer first like so:

map.addLayers([ilayer, glayer]);

The ilayer appears, then when you switch to the glayer the setCenter is on the coast of Africa (0,0 as we all know too well). So this would mean it's not working.

Setting displayProjection: new OpenLayers.Projection("EPSG:4326") in the map object has not accomplished anything.

What am I doing wrong?

Like I said, I’ve decided to start from scratch again just to see if I could get a simple setCenter working.

In addition, I hope I don't have to do a transform on all the initial vectors and markers, but we shall see.

Answer 1

It usually helps to set the map properly.

Whenever I use Google Maps as a layer, I use some code like this:

var map = new OpenLayers.Map({
    div: "map",
    projection: "EPSG:900913",
    displayProjection: "EPSG:4326",
    numZoomLevels: 18        
});
    
 var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
    
var layer1 = new OpenLayers.Layer.MapServer( "My layer that has been working well",    
"mapserv.exe url", {map: '/mapfile_dir', layers: ['ex1', 'ex2'] }, {singleTile: true});

map.addLayers([ghyb,layer1]);

//now add the required controls:
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
    
//finally Zoom into wherever required:

var lonLat = new OpenLayers.LonLat(-82, 28).transform(new  
OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857")));
map.setCenter (lonLat, 7);