Blogger map widget

From OpenStreetMap Wiki
Jump to: navigation, search

You can add an OSM map on a blogger.com blog as described here.

A dynamic "slippy map"

Here's how to add a dynamic zooming panning "slippy map". As an example, have a look at Chris Hill's blog: http://chris-osm.blogspot.co.uk

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 OpenStreetMap.org front page. 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.

Steps 7,8 and 9 describe adding a map which is visible from all pages, modifying your site's layout. If you only want a map visible on a particular blog post, then simply edit or add a new post, swap to HTML editing mode and... proceed to step 10

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, and give it a title

10. 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.

See also Export tab for more details of export options

A static map image

Another approach is to add a static map image. This means site visitors will not be able to pan around or zoom on your map, however you can (and should) make the image a link to a slippy map on the OpenStreetMap.org front page.

The steps to embed a static map image are rather similar to those above, except steps 1-4 are different. The HTML fragment you need, would be generated in a different way, but this depends on which static map images service you wish to use (You have a choice).