How to get directions from Google Maps into Gaia Maps for iOS so you can use them offline

I wanted a way to download directions from Google Maps onto an offline mapping program on the iPad so that I could use the iPad for navigation even when I don't have my cellular service.  I have an iPad with 3G, but because I am a tightwad I only turn the 3G service on when I am on long trips. Also, we go plenty of places with little or no cell service out here in the west, so even if I wasn't a cheapskate I would want this capability.

It turns out that it is not that hard transfer directions from Google Maps into Gaia GPS as a route (not turn-by-turn directions, sorry) that you can view as a colored line on the map.  These days my favorite iOS offline maps app is Gaia GPS.  It can do offline street maps (Mapquest using Open Street Maps), satellite view, and topo maps.

• Sign in to Google on your computer browser, since you will need to work with the "My Maps" feature in Google Maps.
• Go to Google Maps and get directions to the place you want to go.
• At the bottom of the list of directions click the "Save to My Maps" link
• Select "Save to a new map" from the drop down that asks which map you want to save to.
• You will be taken to your new map in My Maps.
• Find a link called KML on the left sidebar, just under the title of your map, and click it.
• This will open a save file dialog for a KML file. Save it to your desktop.
• Now transfer the KML file from your computer to your iPad.
• One way to transfer the KML file to Gaia GPS is via email.
• Email the KML file to yourself.
• Open the Email on your iPad and open the attachment using Gaia GPS.
• Another way to transfer the file is via iTunes
• Plug your iPad into your computer
• Go to the tab for your iPad in iTunes and click the Apps button to get to a list of your apps
• Find Gaia GPS in the list of File Sharing apps
• Click the Add button at the bottom of the file list for Gaia GPS. This will open a dialog where you can select your KML file.
• After you have selected your KML file in iTunes, open Gaia GPS on your iPad. It should pop up a dialog saying there is a KML file waiting to be imported and asking you if you want to import it now. Do so.
• Once you have imported the KML into Gaia GPS it won't automatically show up on the map.  You have to first tell Gaia GPS to display the route on the map.
• Go the the Saved screen in Gaia GPS
• On the Saved screen click the button on the top left for saved routes (it looks like two amoebas with stringy appendages)
• Your KML file should be listed at the top of the list of routes with an on/off switch next to it. Turn it on.
• Go back to the Map screen in Gaia GPS and your route will show up as a colored line. 

How to get a route from Google Maps on to an iPad so you can follow it offline

I wanted to find a way to download a route from Google Maps onto my iPad 3G so that I could follow the route on a map offline.  I know that with the iPad 3G data plan turned on you can just use the Maps app to find and follow directions, but I am a frugalista and I like to keep the 3G data plan on my iPad turned off except when I am on long trips.

Here is the procedure I worked out, which requires that you own the $3.99 (as of Dec 2011) MotionX GPS HD app.

• Go to Google Maps and look up directions to the place you want to go.
• At the bottom of the directions click the Save to My Maps link.
• Go to Google My Places (fka My Maps) and select the map with directions you just saved.
• Click the KML link to download a KML file of the directions to your computer.
• Go to http://www.gpsvisualizer.com/ select the KML file to upload and pick GPS format for the output and click Go.
• Email the resulting GPX file to yourself.
• In Mail on your iPad open the email, tap the attachment, and select open in MotionX GPS HD app.
• This will open the MotionX GPS HD app where you can complete the import of the GPX track.
• This will just import the track into the MotionX GPS HD app.  You need to separately download OpenStreetMaps for the relevant area in MotionX GPS HD in order to have the maps available offline.

This doesn't give you turn by turn directions, but it does give you a simple line on a map that you can follow while offline.

How to manage iOS Newsstand subscriptions auto downloads

The screen where you manage automatic download settings for subscriptions in the new iOS  Newsstand is hard to find (at least it was for me!) Here is how to get to it on your iPad, iPod Touch, or iPhone.

• Tap on the Settings app to get to the Settings screen
• Scroll down list of settings until you see the icon for the Store and tap that
• There will be a section of the Store settings called "Automatically download new content when on Wi-Fi" and all of your Newsstand subscriptions should be listed there with an on/off slider for each one.

Incidentally, the wording of this screen seems to imply that automatic downloads of subscriptions only happen when on Wi-Fi (i.e. not on cellular), which I hope is true because one issue of the New Yorker would blow more than half my cheapskate 250 MB cellular plan.

Specifying different CSS for landscape and portrait orientations on the iPad

I have a web app that uses jQuery UI buttons. I noticed that on my iPad the buttons worked fine in portrait orientation, but in landscape orientation the buttons, and even regular links in a table, would not work properly when pressed (a different button or link than the one pressed would fire). I determined that this problem was caused by the following tag in my HTML:

<meta name='viewport' content='width=device-width' />

Using this tag causes Safari Mobile (the iPad browser) to zoom in on the page a bit in landscape orientation, making the fonts a bit bigger, which would be fine except that it apparently breaks link and button functionality in some cases. I got the buttons and links to work properly by using this tag instead:

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

This locks down the page so it doesn't (and can't) zoom in or out.

That fixed my broken buttons and links in landscape orientation, but I had really liked the way the fonts got bigger in landscape orientation. It gave me a way to have two different zoom levels in may app. If I wanted to see more content in a small font I used portrait; if I wanted to see less content in a bigger font I used landscape.

So, I figured out how to get the exact same effect using CSS "media queries." Here is some CSS that first sets styles for the iPad regardless of orientation and then specifies different styles for portrait and landscape orientation:

@media only screen and (max-device-width: 1024px)
{/* This block specifies CSS that only applies to an iPad
max-device-width: 1024px seems to only select the iPad*/

body
{margin-left: 0px;
margin-top: 0px;}

}

@media only screen and (max-device-width: 1024px) and (orientation: portrait)
{/* This block provides CSS that only applies to the iPad in portrait orientation */

body
{font-size: 16px;}

}

@media only screen and (max-device-width: 1024px) and (orientation: landscape)
{/* This CSS kicks in only when an iPad is in landscape mode. It makes the font bigger, the table rows taller, etc */

body
{font-size: 18px;}

}

You can put this block of CSS at the end of the regular stylesheet for a page and it will apply different CSS when the page is viewed on the iPad, allowing you to have a completely different layout on the iPad than you have on a regular browser. What is remarkable to me is how smoothly the styles change when I switch orientation on the iPad; I was afraid there would be lag while the page reformatted but I can't detect any.

Workaround for jQuery .live() event handler not working on Mobile Safari, iPad, iPod Touch, iPhone

I have a web app where I use the jQuery .live() method to attach a click event handler to a table td element (to convert it into a input field when the user clicks the table cell and then post the input using ajax.)  Everything worked properly on all the mainstream browsers (Firefox, Safari, Chrome) but nothing happened when I tapped the table cell when viewing the app on my iPad.  Some Googling led me to this blog post:

jQuery’s live click handler on mobile Safari

This guy discovered that the .live() click event will fire on Mobile Safari (i.e. iPad, iPod Touch, iPhone) when it is attached to certain elements (like an anchor tag), but for some other elements it will only fire if you add onclick="" to the element tag.

I added onclick="" to my td tag for my table cell and voila, tapping on the table cell works now to convert it to an input field like it should.

Resources about designing web content for iOS devices (iPhone, iPod, iPad)

Apple has a thorough guide to developing web content for Safari on the iPhone, presumably most of it also applies to the iPad:

[iOS] Safari Web Content Guide

I haven't read all of this article yet but the title is promising:

The iPad Web Design and Development Toolbox