<div id="mapdiv"></div><!-- [et_pb_line_break_holder] --> <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script> <!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> map = new OpenLayers.Map("mapdiv");<!-- [et_pb_line_break_holder] --> map.addLayer(new OpenLayers.Layer.OSM());<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection<!-- [et_pb_line_break_holder] --> projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 ).transform(epsg4326, projectTo);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var zoom=14;<!-- [et_pb_line_break_holder] --> map.setCenter (lonLat, zoom);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var vectorLayer = new OpenLayers.Layer.Vector("Overlay");<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // Define markers as "features" of the vector layer:<!-- [et_pb_line_break_holder] --> var feature = new OpenLayers.Feature.Vector(<!-- [et_pb_line_break_holder] --> new OpenLayers.Geometry.Point( -0.1279688, 51.5077286 ).transform(epsg4326, projectTo),<!-- [et_pb_line_break_holder] --> {description:'This is the value of<br>the description attribute'} ,<!-- [et_pb_line_break_holder] --> {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }<!-- [et_pb_line_break_holder] --> ); <!-- [et_pb_line_break_holder] --> vectorLayer.addFeatures(feature);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var feature = new OpenLayers.Feature.Vector(<!-- [et_pb_line_break_holder] --> new OpenLayers.Geometry.Point( -0.1244324, 51.5006728 ).transform(epsg4326, projectTo),<!-- [et_pb_line_break_holder] --> {description:'Big Ben'} ,<!-- [et_pb_line_break_holder] --> {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }<!-- [et_pb_line_break_holder] --> ); <!-- [et_pb_line_break_holder] --> vectorLayer.addFeatures(feature);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var feature = new OpenLayers.Feature.Vector(<!-- [et_pb_line_break_holder] --> new OpenLayers.Geometry.Point( -0.119623, 51.503308 ).transform(epsg4326, projectTo),<!-- [et_pb_line_break_holder] --> {description:'London Eye'} ,<!-- [et_pb_line_break_holder] --> {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25 }<!-- [et_pb_line_break_holder] --> ); <!-- [et_pb_line_break_holder] --> vectorLayer.addFeatures(feature);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> map.addLayer(vectorLayer);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> //Add a selector control to the vectorLayer with popup functions<!-- [et_pb_line_break_holder] --> var controls = {<!-- [et_pb_line_break_holder] --> selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function createPopup(feature) {<!-- [et_pb_line_break_holder] --> feature.popup = new OpenLayers.Popup.FramedCloud("pop",<!-- [et_pb_line_break_holder] --> feature.geometry.getBounds().getCenterLonLat(),<!-- [et_pb_line_break_holder] --> null,<!-- [et_pb_line_break_holder] --> '<div class="markerContent">'+feature.attributes.description+'</div>',<!-- [et_pb_line_break_holder] --> null,<!-- [et_pb_line_break_holder] --> true,<!-- [et_pb_line_break_holder] --> function() { controls['selector'].unselectAll(); }<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] --> //feature.popup.closeOnMove = true;<!-- [et_pb_line_break_holder] --> map.addPopup(feature.popup);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function destroyPopup(feature) {<!-- [et_pb_line_break_holder] --> feature.popup.destroy();<!-- [et_pb_line_break_holder] --> feature.popup = null;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> map.addControl(controls['selector']);<!-- [et_pb_line_break_holder] --> controls['selector'].activate();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </script><!-- [et_pb_line_break_holder] -->