How to show an OpenStreetMap map in a div?

Question

How do I show an OpenStreetMap map in a (smaller) div?

I use this code:

<html><body>
  <div id="mapdiv" width="500" height="300"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

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

    var zoom=13;

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

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

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

but the map is shown full over the webpage.

`
` This is wrong. you want [to use CSS](https://stackoverflow.com/questions/16068665/how-to-set-divs-height-in-css-and-html). — Martin, Sep 29 '18 at 15:57

score 4 · Accepted Answer · answered Sep 29 '18 at 15:52

4

Try with:

<div id="mapdiv" style="width:500px; height:300px;"></div>

answered Sep 29 '18 at 15:52

Franz

645
1
9
21

score 0 · Answer 2 · answered Sep 05 '22 at 06:07

0

I want a location on the map to be selected by the user in openstreetmap. And I send that position to the server through the form.

answered Sep 05 '22 at 06:07

amirmohamad mohamadi

1

You are asking instead of giving answer to the question ! – monim Sep 09 '22 at 15:02

How to show an OpenStreetMap map in a div?

2 Answers2