Popups over markers not working in OpenLayers

Question

I have a map developed based on google map API and OpenLayers. It has some markers on it. I'm trying to create a popup for each marker. The markers are in a markers layers. Besides the markers layer, there are multiple other layers in the map as well. I'm trying to use OpenLayers.Control.SelectFeature API to do it. But the popups are not working. Following is my code. Any hints are appreciated!

function createPMap(){
if(pMap != null) pMap.destroy();

// Create pMap
pMap = new OpenLayers.Map({
  projection: new OpenLayers.Projection("EPSG:900913"),
  displayProjection: new OpenLayers.Projection("EPSG:4326"),
  units: "m",
  maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
  allOverlays: false,
  theme: null,
  controls: []
});

// Add control
pMap.addControl(new OpenLayers.Control.LayerSwitcher());
geocoder = new OpenLayers.Control.Geocoder();
pMap.addControl(geocoder);

// Create gplayer
gplayer = new OpenLayers.Layer.Google(
   "Google Physical",
   { type: G_PHYSICAL_MAP,  isBaseLayer: true,sphericalMercator: true, minZoomLevel: 0 }
);
pMap.addLayer(gplayer);

// Create markers layer
markers = new OpenLayers.Layer.Markers( "Sites" );    
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var epsg900913 = new OpenLayers.Projection('EPSG:900913');          
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);            

    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-88.63023333,36.00091667).transform(epsg4326, epsg900913),icon));        
    var icon1 = icon.clone();
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-73.66586,42.297826).transform(epsg4326, epsg900913),icon1));
    var icon2 = icon.clone();
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-110.802188,38.17243402).transform(epsg4326, epsg900913),icon2));
    var icon3 = icon.clone();
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-110.9660481,38.43077243).transform(epsg4326, epsg900913),icon3));    

    pMap.addLayer(markers);

    pMap.zoomToMaxExtent();

    selectControl = new OpenLayers.Control.SelectFeature(
            markers,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    pMap.addControl(selectControl);
    selectControl.activate();   
}

function onPopupClose(evt) {
    selectControl.unselect(selectedFeature);
}

function onFeatureSelect(feature) {
    console.log("We are at select.");
    var selectedFeature = feature;

    var popup = new OpenLayers.Popup.FramedCloud("SitesPopup", 
        //new OpenLayers.LonLat(-98.63023333,36.00091667).transform(epsg4326, epsg900913),
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(100,100),
        //"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
        "Test a popup",
        null, true, onPopupClose
    );
    feature.popup = popup;
    pMap.addPopup(popup);
}

function onFeatureUnselect(feature) {
    console.log("We are at unselect.")
    if(feature.popup) {
        pMap.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
}

Answer 1

May be you can try it like this:

     //markers in Vector Layer
    markers = new OpenLayers.Layer.Vector("Sites");
    markers.style = {
        externalGraphic:'http://www.openlayers.org/dev/img/marker.png',  //marker icon
        graphicWidth:21,  //marker width
        graphicHeight:25   //marker height
    };

    var epsg4326 = new OpenLayers.Projection('EPSG:4326');
    var epsg900913 = new OpenLayers.Projection('EPSG:900913');  

    //new a marker
    var lonlat1 = new OpenLayers.LonLat(-88.63023333,36.00091667).transform(epsg4326, epsg900913);
    var marker1 = new OpenLayers.Feature.Vector();
    marker1.geometry = new OpenLayers.Geometry.Point(lonlat1.lon,lonlat1.lat);

    var lonlat2 = new OpenLayers.LonLat(-73.66586,42.297826).transform(epsg4326, epsg900913);
    var marker2 = new OpenLayers.Feature.Vector();
    marker2.geometry = new OpenLayers.Geometry.Point(lonlat2.lon,lonlat2.lat);

    var lonlat3 = new OpenLayers.LonLat(-110.802188,38.17243402).transform(epsg4326, epsg900913);
    var marker3 = new OpenLayers.Feature.Vector();
    marker3.geometry = new OpenLayers.Geometry.Point(lonlat3.lon,lonlat3.lat);

    var lonlat4 = new OpenLayers.LonLat(-110.9660481,38.43077243).transform(epsg4326, epsg900913);
    var marker4 = new OpenLayers.Feature.Vector();
    marker4.geometry = new OpenLayers.Geometry.Point(lonlat4.lon,lonlat4.lat);

    markers.addFeatures([marker1,marker2,marker3,marker4]);

    pMap.addLayer(markers);

    pMap.zoomToMaxExtent();

    selectControl = new OpenLayers.Control.SelectFeature(
            markers, //markers should be an Vector Layer
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

Answer 2

I'd look at your lonlat syntax. I think you need to make it a new instance of OpenLayers.LonLat. Try:

new OpenLayers.LonLat(feature.geometry.getBounds().getCenterLonLat().x,feature.geometry.getBounds().getCenterLonLat().y) ;

And make sure you're getting it in the correct cood sys.

Answer 3

SelectFeature control needs an Vector Layer but not a Markers Layer