Pages

Geekiness

How to combine a Google "My maps" with a Latitude badge inside a Blogspot gadget

Seeing how long it took me to get the above gadget right (many people have asked online for this combo, but nobody ever posted a good answer), I figured I create a separate page on this blog to describe how this one works.

There's two files involved, in my case called "my_map.xml" and "mymapbadge.kml". You can used mine as starting points:

http://www.3brooks.com/my_map.xml
http://www.3brooks.com/mymapbadge.kml

You will need to host those files somewhere where they can be accessed with a URL. I have my own domain for this, but there's many ways of doing this for free I think.
A quick explanation of the files:

"my_map.xml": This is the XML file that you specify in the "Add your own gadget" menu in the Blogspot Designer menu. Inside it points to mymapbadge.kml.
"mymapbadge.kml": This is really where the two sources get combined, the My Maps, and the Latitude badge.

Editing the two files to point to your specific links:
my_map.xml: What needs to get replaced is the "up_kml_url=http%3A%2F%2F3brooks.com%2Fmymapbadge.kml" with the location of your mymapbadge.kml. Note that the URL needs to be escaped like that (i.e. replace ":" and "/" with %3A and %2F for example. Other characters might need that too, check online on how to do that.)
mymapbadge.kml:
1. The user ID for the first link needs to be replaced with your user ID. Go to https://www.google.com/latitude/b/0/apps , enable public Latitude badge, and copy your ID from the box.
2. For the seconds link, the "msid" needs to be replaced with your My Map ID. Go to your map, make it public, then click on "Link" at the top-right, and then copy the msid out of the "Email or IM" string.

Once you've done all that, go into your blog's Design tab, add a custom gadget, and use the my_map.xml URL when prompted.

FYI, even though I didn't do it in my case, you can also specify auto-update for the elements. Look at
http://code.google.com/apis/kml/documentation/kml_tut.html
they suggest using the code

<Link>
        <href>the Latitude link</href>
        <refreshInterval>2</refreshInterval>
        <viewRefreshMode>onStop</viewRefreshMode>
        <viewRefreshTime>1</viewRefreshTime>
      </Link>


That should be it!