CODEWITHSUNDEEP
javascriptopenlayersopenstreetmap
Filippo oretti
Filippo oretti

Reputation: 49817

Open Layer basic example doesn't works

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 :

enter image description here

Upvotes: 0

Views: 1251

Answers (3)

Dario
Dario

Reputation: 5333

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; }

Upvotes: 4

dfsq
dfsq

Reputation: 193261

You have two mistakes:

  1. DIV element must go before your javascript, or place map creation code in DOM ready event.

  2. You must set a height to yout div element.

See this fiddle.

Upvotes: 4

Michael Laffargue
Michael Laffargue

Reputation: 10294

Depending on browsers, you may want to try putting a height and if not working putting fix width to the map div like width:400px;height:400px. I know its strange but I got the case on a map showing on IE and chrome but not FF.

Upvotes: 0

Related Questions