Question

code:

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
    map = new OpenLayers.Map("open_map");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));

    map.setCenter (lonLat, zoom);
  </script>
<div id="open_map" style="width:100%"></div>

i used the official site example, but it doesn’t works for me, it doesn’t shows any map in browser.

I have no errors in console, strange … any idea?

EDITED

<div id="open_map" style="width:100%;height:300px;position:relative;"></div>
 <script type="text/javascript">
    map = new OpenLayers.Map("open_map");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));

    map.setCenter (lonLat, zoom);
  </script>

moved script after the div element now i see :

Answer 1

Your problem is that Twitter Bootstrap sets this property on the img tag:

img { max-width:100%; }

I imagine that you want to get work with Open Layers map without breaking the whole theme, so you can just override that directive for your map div.

Example: you map have a div with class="map", so the css is:

.map img { max-width:none; }