Embedded HTML displays zoomed out

You should find that you can adjust your view of the map on the OpenStreetMap website, to make adjustments to the resulting generated HTML (fiddle with your view, e.g. to zoom in/out a bit, and then re-do the copy and paste of the HTML into your website)

But you may well find the zoom you see on the website (in a wide window) is higher than the zoom level in the resulting embedded map (narrow iframe), so if you specifically want a higher zoom level, simply zoom in a bit more to compensate.

What you actually need to pay attention to, is what extents of the map can you see on screen, to the left and right and sides. These will still be visible within the narrower embedded view. It's designed to preserve the extents of what you can see, rather than preserve the centre and zoom level of what you can see.

If you are interested in parameters, you can see that generated HTML is an iframe with a 'src' parameter. This points to embed.html with the parameter 'bbox'. It is this parameter which represents the bounding box coordinates of this extent of what's visible on the screen. This is telling it indirectly what the zoom level will be.

Another interesting consequence of this approach is that you would get a higher zoom level if you made your iframe bigger (change the width and height parameters in the generated HTML)

But as for specifying a zoom level parameter more directly in the URL, that is currently not supported. The embed.html javascript is relatively simple, and only supports the bbox parameter as generated by the share feature.

We could enhance this to add more options, but the central OpenStreetMap website isn't really about hosting iframe contents for people, and if you have more sophisticated requirements as a web developer, you should do one of the following (in increasing order of complexity)

• Use umap, to create a iframe embeddable map with all sorts of options. umap would be hosting the contents of your iframe.
• Use Static map images to generate a static image URL with all sorts of options. Your chosen service would be hosting the static image (Note: Although static images might seem rather basic, they're also lean and elegant, and can be linkified to somewhere like the OpenStreetMap homepage to offer a more dynamic view)
• Deploying your own slippy map. Use leafletJS or OpenLayers to host the javascript yourself with full control over, zoom and markers etc.

So I assume that you used the Export tab of openstreetmap.org site.

There it is documented that the exported HTML code is displaying the current map view ... so if this does not work for you, it may be a software bug at osm.org

Please try again, or show us the delivered HTML code you have embedded to your website via Pastebin or some similar service if it is too much text.

the generated HTML code by the export panel on http://www.openstreetmap.org/ (I guess you mean that) includes a parameter "bbox" which defines the area which should be shown. I just tried an example export and the HTML code did not show the whole world but a much smaller area which I had in my current osm.org view.

Go to http://www.openstreetmap.org/?lat=50.1331&lon=8.6917&zoom=12&layers=M select export, select the HTML option. There you are:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=8.5628,50.0781,8.8217,50.1877&amp;layer=mapnik" style="border: 1px solid black"></iframe>

Since this problem still persists (both in Firefox and Chrome), no one has posted a solution that actually works and reloading always helps, I offer the following workaround.

The embed iframe:

<iframe id="map" {rest_of_OpenStreetMap_embed_code} ></iframe>

The script:

<script type="text/javascript" defer>
function reload(id) 
{
    var buggyid = document.getElementById(id);
    buggyid.src = buggyid.src;
}

setTimeout(reload, 500, 'map');
</script>

This reloads the iframe with id="map" 500ms after everything has loaded. 500ms is enough in my experience. Try to increase the value if it still doesn't load correctly. Also, you can put a button or image link over or near the iframe to call the script reload('map') manually so the visitor knows what to do in case the bug should still occur or return.

Hey, it's my first post here :) It's not ideal way, but here's rewritten method from my PHP's class to use as separate function. It makes iframe URL from input data: lat, lon and area.

The function you'd use is getBBox function to get array. $lat and $lon is latitude and longitude in decimal form (i.e. 54.3242342). $area is how much area do you want to see in meters (if you want to have map starting 500 meters above and ending 500 meters below, use 1000).

It could be written better, but you have an idea. getCoordOffset is internal function, so I'm not explaining it, unless anybody wants it. For easiness of use, I release it as public domain, wherever it's possible and CC-0 for other cases - if you actually want to use attribution, just use my nick or change it to website name coming from it.

The algorithm is not ideal, but it should be ok for this use. If you don't want marker, remove everything after layer=mapnik from sprintf template URL and remove 4 and 5 index from getBBox function array.

As the result of the function is an array, you can feed it to vsprintf() - array version of sprintf(). In the example you have ready to use vsprintf function. If you are going to debug it by pasting URL in browser, you won't see marker, unless you replace & in URL with &.

function getCoordOffset($what, $lat, $lon, $offset) {
    $earthRadius = 6378137;
    $coord = [0 => $lat, 1 => $lon];

    $radOff = $what === 0 ? $offset / $earthRadius : $offset / ($earthRadius * cos(M_PI * $coord[0] / 180));
    return $coord[$what] + $radOff * 180 / M_PI;    
}

function getBBox($lat, $lon, $area) {
$offset = $area / 2;
return [
    0 => getCoordOffset(1, $lat, $lon, -$offset),
    1 => getCoordOffset(0, $lat, $lon, -$offset),
    2 => getCoordOffset(1, $lat, $lon, $offset),
    3 => getCoordOffset(0, $lat, $lon, $offset),
    4 => $lat,
    5 => $lon
]; // 0 = minlon, 1 = minlat, 2 = maxlon, 3 = maxlat, 4,5 = original val (marker)
}

If you want bounding box for area 1x1km, now you need to count it like that:

$bbox = getBBox(52.13543, 19.43434, 1000);
$url = vsprintf('http://www.openstreetmap.org/export/embed.html?bbox=%.15f%%2C%.15f%%2C%.15f%%2C%.15f&layer=mapnik&marker=%.15f%%2C%.15f', $bbox); // merge result array with template string - URL for iframe

By the way I had problems with map totally zoomed out, but it's rather OSM bug. I changed offset to smaller, then I got back to earlier offset and it worked. Maybe malformed cookies or so. It happened once.

I'm having a similar problem. The embedded iframe works fine for a while, then after one or two browser refreshes the view I wanted is replaced by a map of the world.

Hey, i have the same problem!

Is there anybody who can help?

Greetings!

While exporting check if in the url you got '%2C' or just '%'. In first case, try to remove all '2C' that appears in the url after '%' or replace by comma ','. Strange enough, it is sometimes working, but not always.