--- step-10/index.html	2023-07-02 13:20:09.119154723 +0000
+++ step-11/index.html	2023-07-02 13:20:09.119154723 +0000
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Step 10: add a marker</title>
+    <title>Step 11: marker plus popup</title>
     <script src="../OpenLayers.js"></script>
     <script src="../OpenStreetMap.js"></script>
     <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
@@ -73,7 +73,37 @@
 
         markers = new OpenLayers.Layer.Markers("Markers");
         map.addLayer(markers);
-        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat).transform(projLonLat, projMercator)));
+
+        feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(lon,lat).transform(projLonLat,projMercator)); 
+        feature.closeBox = true;
+        feature.popupClass =  OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
+          'autoSize': true, 
+          'maxSize': new OpenLayers.Size(300,200)
+        });
+        feature.data.popupContentHTML = "<h1>Hello World!</h1><hr/>Lore ipsum ...";
+        feature.data.overflow = "auto";
+        
+        marker = feature.createMarker();
+
+        markerClick = function (evt) {
+          if (this.popup == null) {
+            this.popup = this.createPopup(this.closeBox);
+            map.addPopup(this.popup);
+            this.popup.show();
+          } else {
+            this.popup.toggle();
+          }
+          currentPopup = this.popup;
+          OpenLayers.Event.stop(evt);
+        };
+        marker.events.register("mousedown", feature, markerClick);
+        markers.addMarker(marker);
+
+        map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat,projMercator), zoom);
+
+        feature.popup = feature.createPopup(feature.closeBox);
+        map.addPopup(feature.popup);
+        feature.popup.hide();
       }
     </script>
   </head>