For a simple example of how to do this, you need to do a couple of things:
Create a vector layer to contain your markers and add it to the map:
this.markerLayer = new OpenLayers.Layer.Vector(
"My Marker Layer",
{ /* configuration options are set here */ }
);
map.addLayer(this.markerLayer);
Create your marker and add it to the map:
var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
this.markerLayer.addFeatures([marker]);
Create a select control for your layer, and register a function to build your popup when the user hovers over your marker:
var selectControl = new OpenLayers.Control.SelectFeature(this.markerLayer, {
hover: true
});
selectControl.events.register('featurehighlighted', null, onFeatureHighlighted);
Build your popup:
onFeatureHighlighted: function (evt) {
// Needed only for interaction, not for the display.
var onPopupClose = function (evt) {
// 'this' is the popup.
var feature = this.feature;
if (feature.layer) {
selectControl.unselect(feature);
}
this.destroy();
}
feature = evt.feature;
popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"
"+feature.attributes.station_na + "
" +
"Location: " + feature.attributes.location + '
' +
"Elevation: " + feature.attributes.elev_,
null, true, onPopupClose);
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup, true);
}, // ...
