Curious Cat uses OpenStreetMaps and umap to create my own maps. Then I can embed them on my sites, for example here for Chiang Mai Thailand.
For some reason when you use umap and select the embed option it gives you code that leaves off the zooming altogether. It is an easy fix (and I imagine the code will be fixed making this simple advice obsolete). But for now this is all you need to do.
The url umap adjusts as you zoom the map in your browswer. For example, going to
which the Curious Cat Chiang Mai map it will “redirect” to some really far out zoom level
Then you can zoom in a bunch to get the level you want to use to embed.
The code created for you to paste into your page is
[code]<iframe width="100%" height="300px" frameBorder="0" src="http://umap.openstreetmap.fr/en/map/chiang-mai_18602?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&datalayersControl=true&onLoadPanel=undefined"></iframe><p><a href="http://umap.openstreetmap.fr/en/map/chiang-mai_18602">See full screen</a></p>[/code]
Which doesn’t include any zooming info so you get the super far our zoom default.
You need to add to the url
so that it includes the zooming info. So it would be
You can also see the link to “See full screen” isn’t using the zoom settings. If you wanted that link to a zoom setting of your choice you can set that also.
Note the view on your screen and the embedded map isn’t going to be identical. The map will likely cut off some of what you see (due to the sizing of the embedded map). You can also adjust the sizing of the embedded map by adjusting the height (they default to 300px, but you can make it 400px or whatever you want).