disjoint thoughts

Google has announced a new way to embed google maps by providing a snippet of html that can be copy/pasted anywhere. No API key or HTML munging necessary. Just click on the “Link to this page” link, and grab the html for the map you’re viewing. Here’s an example showing the rock gym I climb at:

View Larger Map

Pretty slick!

I wrote a little Ruby script to parse some hot spring data and throw it into a kml file for display in google maps or google earth (here’s the results). It doesn’t do anything too complex, but it makes for a decent example of using hpricot to parse html and rexml to generate kml. Here’s the source if anyone would like to take a look:

#written by Benjamin Smith
#www.disjointthoughts.com
#benjamin.lee.smith@gmail.com

require 'hpricot'
require 'open-uri'
require 'rexml/document'
require 'erb'

#arg: url to parse from http://www.hotspringsenthusiast.com/TextLinks.asp
#doesnt work for arkansas, georgia, new york, north carolina, south dakota, virgina
url = ARGV[0]

#parse name of state out of url
state = url[url.index('.com')+5..url.length-5]

#grab the html
doc = Hpricot(open(url))

#create xml for the kml file
xml = REXML::Document.new
kml = xml.add_element 'kml', {'xmlns' => 'http://earth.google.com/kml/2.1'}
kml_doc = kml.add_element 'Document'

#add the name of the state to the xml
(kml_doc.add_element 'name').text = "#{state} Hot Springs"

#add reference to me
(kml_doc.add_element 'description').text = 'created by Benjamin Smith http://www.disjointthoughts.com'
doc_folder = kml_doc.add_element 'Folder'

#add reference to the data source
(doc_folder.add_element 'name').text = 'http://www.hotspringsenthusiast.com/'
(doc_folder.add_element 'description').text = "data source #{url}"

#iterate over the rows in the table
doc.search('//tr').each do |tr|
  tds = tr.search('//td')
  if tds.first.inner_html != 'STATE'
    link = tds[3].search('//a').to_s
    lat = link[link.index('lat=')+4..link.index('&',link.index('lat='))-1]
    lon = link[link.index('lon=')+4..link.index('"',link.index('lon='))-1].gsub('E','')
    topo = link[link.index('href="')+6..link.index('"',link.index('href="')+7)-1] 

    placemark = doc_folder.add_element 'Placemark'
    (placemark.add_element('name')).text = tds[3].search('//a').inner_html.to_s.gsub("\r\n",'').squeeze.downcase
    (placemark.add_element('description')).text = REXML::CData.new('Temperature: '+tds[4].inner_html+'F/'+tds[5].inner_html+'C<br/><a href="'+topo+'">Topo')
    point = placemark.add_element 'Point'
    (point.add_element 'coordinates').text = "#{lon.to_s},#{lat.to_s}"
  end
end

f = File.new("#{state.downcase}.kml",'w')
f.write(''+"\n")
xml.write(f,4)
f.close

#create html file to display kml in google map
erb = ERB.new(File.read('template_hot_springs.erb'))
f = File.new("#{state.downcase}_hot_springs.html",'w')
f.write(erb.result(binding))
f.close

If you’d like to run it on your own, you can download it here. You’ll also need this template file and this css file.

A few weeks ago I posted a google map I had made of Arizona hot springs. However I had some issues with the map.

The map was created using a kml file loaded into an html page using some google javascript magic:

var geoXml = new GGeoXml("http://www.disjointthoughts.com/static_blog_files/arizona.kml");

Everything loaded up and looked fine until I tried to click on one of the markers/pins. When I clicked on the markers, the bubble which appeared over the it was blank instead of containing the description: name of the hot spring along with a link to a topo. To make things more confusing, this behavior didn’t happen when loading the kml in google earth.

Since the kml file worked fine in google earth, I assumed the kml file was ok. The HTML I was using to render the map in a web browser was a copied/pasted example from google’s documentation, so I assumed that was ok as well. After some searching around I found this thread describing my exact problem. Turns out google’s documentation was a bit outdated. The javascript include for google map api needs to be updated from “v=2″ to “v=2.x”:

<script src="http://maps.google.com/maps?file=api&v=2.x&key=your-google-map-key" type="text/javascript"></script>

This cured my problem. Now I have a lovely, marker clickable, map of the hot springs of arizona.