title: Openlayers - display pacific markers popup using marker id and onclick event
body: <p>I have the following code which addes 3 markers to the map along with there popup boxes what I want to do is have a list of location at bottom of page and using the id of the marker when click a place in the list it just make that places popup appear on the map.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
          &lt;title&gt;Open Street Map&lt;/title&gt;
          &lt;style type="text/css"&gt;
              body { font: normal 10pt Helvetica, Arial; }
              #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
          &lt;/style&gt;
          &lt;script src="lib/OpenLayers.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              var iconSize = new OpenLayers.Size(21, 25);
              var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
              var icon = new OpenLayers.Icon("img/fourmarker.png",
                             iconSize, iconOffset);
  
  
              var zoom, center, currentPopup, map, lyrMarkers;
              var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
                  "autoSize": true,
                  "minSize": new OpenLayers.Size(300, 50),
                  "maxSize": new OpenLayers.Size(500, 300),
                  "keepInMap": true
              });
  
              var bounds = new OpenLayers.Bounds();
              function addMarker(id, lng, lat, info) {
                  var pt = new OpenLayers.LonLat(lng, lat)
                                         .transform(new OpenLayers.Projection("EPSG:4326"), 
                                         map.getProjectionObject());
                  bounds.extend(pt);
                  var feature = new OpenLayers.Feature(lyrMarkers, pt);
                  feature.closeBox = true;
                  feature.popupClass = popupClass;
                  feature.data.popupContentHTML = info ;
                  feature.data.overflow = "auto";
                  var marker = new OpenLayers.Marker(pt, icon.clone());
  
                  var markerClick = function(evt) {
                      if (currentPopup != null &amp;&amp; currentPopup.visible()) {
                          currentPopup.hide();
                      }
  
  
                      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);
                  lyrMarkers.addMarker(marker);
              }
  
              function initMap() {
                  var options = {
                      projection: new OpenLayers.Projection("EPSG:900913"),
                      displayProjection: new OpenLayers.Projection("EPSG:4326"),
                      units: "m",
                      numZoomLevels: 19,
                      maxResolution: 156543.0339,
                      maxExtent: new OpenLayers.Bounds(-0.13011, -0.13011, 51.51039, 51.51039)
                  };
  
                  map = new OpenLayers.Map("map", options);
                  map.addControl(new OpenLayers.Control.DragPan());
                  var lyrOsm = new OpenLayers.Layer.OSM();
                  map.addLayer(lyrOsm);
                  lyrMarkers = new OpenLayers.Layer.Markers("Markers");
                  map.addLayer(lyrMarkers);
  
                   //add marker on given coordinates
                  addMarker('1',-0.12519,51.51112 , '&lt;b&gt;Tescos&lt;/b&gt;&lt;br/&gt;Covent garden');
                  addMarker('2',-0.13264,51.50918 , '&lt;b&gt;Spar&lt;/b&gt;&lt;br/&gt;Leicester Square');
                  addMarker('3', -0.12498,51.50807 , '&lt;b&gt;M &amp; S&lt;/b&gt;&lt;br/&gt;Embankment');
                  center = bounds.getCenterLonLat();
                  map.setCenter(center, map.getZoomForExtent(bounds) - 1);
                  zoom = map.getZoom();
              }
  
  
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="initMap()" style="margin:0; border:0; padding:0; width:1000px; height:500px;"&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EXTRA INFORMATION</p>
  
  <p>I am going to add a list to bottom of map like so:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;location1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;location2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;location3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What i want to get working is when the user clicks so location1 alink then that relevent popup box will show and the other will be removed. </p>
  
  <p>How would this be done. </p>