Embed an interactive topo map in your blog

Engage your blog & website readers by giving them the opportunity to interact with your map directly on your site.  
You can play with the map by clicking and dragging to see more terrain than fits in the current window.  If you want more interaction with the map you can click the "View in Hillmap" link to see the map in hillmap.com, see more detail, edit the route, and view the route on different map layers (satellite, USGS, etc.)

How to embed the map

If you program HTML, you can grab the iframe of your map when you click the "Link" button in hillmap.com.  The site generates the code for you.
If, like me, you do not program HTML, you can still embed a map in your site without too much hassle.  The directions below are for you, and please send us an email if you get stuck along the way.

Step 1: Create your map

Visit hillmap.com and customize your map. You can zoom in on your area of choice, plot a route, or upload your gpx tracks.  

Step 2: Prepare your blog

Most blogs have both a graphic user interface (GUI) and an HTML interface.  To embed the map, you will need to copy and paste code into the HTML interface.

Switch to the HTML view of your blog.  Now, my level of HTML programming is such that if I break something in the code, I may or may not be able to fix it by myself.  When I play around in the HTML I protect myself against irreparable breakage by first copying the code, and pasting it somewhere that won't add extra code, a good place to paste it is in a basic text editor. DO NOT copy and paste your code into a Word Doc, because Word will add extra code to your text.  Messy.
Now that the orinal code is somewhere safe, if I break the HTML code I can always replace the broken stuff with the original.  All that is lost will be a little time.

Step 3: Decide where in your blog to put the map

If your blog post is a blank sheet of paper, inserting the map code is easy, just toggle to the HTML view and paste the code (which we will generate in the next step) on the page.  Toggle back to the Graphic User Interface (Blogger calls this view "Compose") to see your map.  Done! Then just treat the map like a photo or other graphic, and work around it.
If, like me, you write your blog post first and then insert images in the appropriate places, you will need to locate where you want to put it in the html.  The HTML displays all of your text, so it's not too hard. I often mark my place with text in the graphic user interface that I can then see in the HTML view.

Step 4: Generate the code

Navigate to your map in hillmap.  Click on the link button at the top of the map screen, or click on the Toosl Tab and select "Link To."
A screen will pop up with two different link options, one is a url for your map.  The other is the iframe, which is what you need to embed the map.  Copy the iframe code (highlighted in blue in the image below.)

Step 5: Insert your map code into the blog

Toggle to the HTML view in your blog.  Paste the iframe code in the location you previously identified.

Now toggle back to the graphic user interface, and take a look at your map!

Remove the map from your blog post

If you need to delete the map, you will need to erase the code in the HTML view, you cannot delete it from the graphic user interface.

Zoom makes a difference

The map will show up in your blog at the same zoom that is displayed in hillmap when you generate the code.  If you want to show the entirety of a long trail in the blog, make sure to zoom out.  If you want to show terrain detail, zoom in before generating the code. Remember, your readers can move the map around in your blog to see more of the terrain in your blog site, or visit hillmap.com to use different tools to explore your map in greater detail.

Map zoomed out

Map zoomed in