Blogger map widget

To add an OSM map to a Blogger blog:

Ideally there should be a proper Blogger widget to do this, but until there is you can embed a map in the general purpose HTML widget. So here's how:

1. Look at the slippy map, centre it on your chosen spot at the zoom level of your chioce on the layer of your choice.

2. Choose the Export tab.

3. Select the Embeddable HTML option.

4. If you want a marker on your map click on the 'Add a marker to the map' and then click on the map where you want the marker to appear.

5. Copy the output HTML, which should be highlighted.

6. Now go to the Blogger dashboard and log in.

7. Click on layout for the blog you want to add the map to.

8. Click on Add a Gadget in the place you want the map, e.g. a sidebar.

9. Choose the HTML/Javascript widget.

10. Give it a title then paste the HTML copied from the export page into the content area.

Now there is a bit of twiddling. A real widget would sort this out but you need to do this by trial and error.

The window size of your widget varies depending on your Blogger template. You need to edit the HTML you have just pasted particularly the width and height, but as you do you might affect the zoom factor. If you are putting the map into a sidebar start by setting the width to 210. Click the Save button and then click Save on the layout page.

You can then view the blog to see how it looks. You might be able to make the width bigger, which gives a better looking map.

The best way forward is to keep editing the widget, possibly changing the settings of the bbox part of the src HTML tag to alter the centre of the map or the zoom level.

Don't be fooled by the obvious "zoom=xx" this will not alter the zoom level of the map in the widget, it changes the zoom level you jump to if you click the "View Larger Map" link.