Embedding map views of geotagged Smugmug photos, with examples

As far as I can tell, views of geotagged photos at http://maps.smugmug.com can't be embedded anywhere else, for example in a blog. For example, as far as I know, this map view of geotagged photos in one of my London galleries can't easily be embedded in a blog entry.

Accordingly, to create map views of my photos and galleries to embed into blog entries, I have been importing smugmug KML feeds into Google Maps, then using the facility there for creating maps. Since I keep forgetting how to do this, and have to reinvent the wheel each time I want to create a blog entry with an embedded map view of some photos, I decided to write a blog entry explaining how I do it. Mainly this is for my own reference, but hopefully it will be useful for others.

There are two things I usually do that I will explain here. The first is embed map views of single galleries. That is pretty straightforward since the appropriate feed is pretty easy to grab from the bottom of the page at Smugmug and drop into My Maps. The second is embed map views based on keyworded photos. At least in my experience, finding the right feed to drop into My Maps is a lot more difficult, and that is what I will spend my time on.

Embedding map views from single galleries

This is pretty straightforward. First, go to the gallery of geotagged photos for which you would like a map view to embed. The gallery should be public, not unlisted, for the geotagging to work. At the bottom of the gallery page you should see a little box that says Gallery photos and icons for Atom, RSS, and Google Earth. Mouse over Google Earth, and right-click and copy the resulting link. For example, for my London gallery, the KML feed that comes up is: http://canghuixu.smugmug.com/hack/feed.mg?Type=gallery&Data=7032876_GpQTG&format=kml20.

Once you have copied the link for your feed, you need to go to Google Maps, and in My Maps, either open an existing map or start a new one by clicking Create New Map. If you create a new map, you can title it. Once you have created a new map, click on Import and you should get a window asking you to either Browse your computer to select map data to upload or enter the URL of map data on the web. You'll do the latter. Paste the link you copied in the box and click on the Upload from URL that will appear as soon as the link is pasted in properly. Note that the upload can sometimes be slow and/or flaky, it may take a few tries. If it loads only a few photos, you can try again, there will be an option to eliminate the existing photos and start from scratch. Once the feed has been imported, you should see a map view of your photos, and list of them on the left. Click Link above and to the right of the map, then click customize and preview embedded map. A new window should open where you can choose the size of your embedded map, zoom and pan, and then see HTML code to copy and paste into your blog. I just went through this for the London gallery I have been mentioning. I chose a size of 600x600, did some positioning, and copied the resulting HTML into this post and here is the result:


View London, December 2008 in a larger map

Embedding map views from keyword feeds


That part was easy.

What keeps frustrating me, however, is embedding map views from keyword feeds. If you view keyworded photos in Smugmug, for example, my favorite photos from London, which have the keywords london and favorite, at the bottom you don't get a nice easy KML feed to simply copy and paste.

Luckily, there is a way to get a KML feed that works... First, use Smugmug to search your own site for the keywords you need. When I searched my own site for london favorite as the search terms, this was the result. Scroll down and you'll see that one set of search results is titled Canghuixu's photos matching 'london favorite', and has RSS and Atom feeds to the right. Right click on one of the icons and copy the link, and then go to Google Maps/My Maps and start a new map, Import, and then in the space for the URL, paste the link you just copied. Edit the link to change the atom03 or rss200 at the end to kml20.

So for example, in this link that I copied from the search results,

http://canghuixu.smugmug.com/hack/feed.mg?Type=usersearch&NickName=canghuixu&Data=london%20favorite&format=rss200

I changed rss200 at the end to kml20 to get a link to put into My Maps:

http://canghuixu.smugmug.com/hack/feed.mg?Type=usersearch&NickName=canghuixu&Data=london%20favorite&format=kml20

Click Upload and it should grind for a bit and then your geotagged photos should show up. Then you can generate the embed code the same way. Here is a 600x600 embedded map of my favorite London photos...


View canghuixu's photos matching: london favorite in a larger map

In principle this should work anywhere you can embed HTML code. Note that the maps will not be dynamically updated, as far as I know. Google Maps does a one time import based on the status of the feed at the time of the import, if you add new photos to a gallery, or add more keyworded photos later, as far as I can tell you would need to update manually by repeating this process.