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.

The Shanghai Bund, One Night in September 2006.... (上海外滩的夜景)

I was looking at some of my older galleries and I noticed that I had a mass of photos from an evening on the Bund in September 2006 that had been mixed in to a gallery of miscellaneous photos from Shanghai. I separated them out and gave them their own gallery...

http://canghuixu.smugmug.com/gallery/9021817_LN99A


Here are a few shots...

Bund Tourist Tunnel, from June 2007...

I was poking around on my site and while looking at my gallery of miscellaneous and largely unremarkable Shanghai photos from June 2007, I decided that the photos I took in the Bund Tourist Tunnel were interesting and different enough to deserve to be hived off to their own gallery. The Bund Tourist Tunnel is a sort of train that runs through a tunnel underneath the river from the Bund to near the Oriental Pearl TV Tower. The tunnel has been decorated with a light display. For some odd reason, I kind of liked, I think because the light show reminded me of the "Jupiter and Beyond" scene at the end of 2001: A Space Odyssey when Bowman gets into the pod to check out the third monolith and it transports him through other dimensions.

A couple of examples...





Enjoy!

The last of my London photos...

I finally had some time over the weekend to process my remaining London photos... Mainly they are some photos taken during a walk around the City, and along the banks of the Thames, on a sunny Sunday when I spent the whole day wandering the city on foot.

Here is the gallery...
http://canghuixu.smugmug.com/gallery/8820794_APZqD

While I'm at it, here is a selection of my overall favorite London photos...http://canghuixu.smugmug.com/keyword/london-favorite. And here are all my London galleries...http://canghuixu.smugmug.com/Europe/686937

Some of my favorite photos from this batch...

Leadenhall Market... This is in the City. Like most of the City, it was deserted on the weekend. I would like to get back here sometime when it is busy, it looks quite interesting. It was apparently used in one of the Harry Potter movies, and I can see why, it has a sort of fairyland not quite of this world feel to it...



Another shot of Leadenhall Market...


30 Cannon Street... A very distinctive building...



Guards changing at Whitehall or Westminister or wherever it was... This was taken a few minutes after I was approached by a police officer who made some inquiries about why I was taking pictures, apparently a lot of the buildings around here are sensitive and I had attracted his attention by having such a large lens. We had a long conversation about photography and I hope I conveyed to him that the lens I was using was actually wide angle lens that would not be very useful for detail shots. Frankly I doubt that anyone who had evil intentions would case a location with such a lens that made them so conspicious, there are much less conspicious cameras with good zoom capability that would probably be more useful for discrete photography...