Create an Interactive Map in iBooks

Along with our Director of Admissions I have been working on an iBook guide for our school. One thing she asked me to do was incorporate a virtual tour of the campus.  I told her that I didn't know how to do that, I thought it was beyond my ability level (after all, I'm no programmer, those people are like wizards to me). She wouldn't let it go so I spent some time trying to figure it out.

"Some time" became days and then almost a whole week.

Here's what I managed to do:

Here's how to do it:  

Step 1 - Use the 360 Panorama app to create your panoramic photos. You will create an account and you need to upload your photos within the app so that they can be viewed online. (Tip: I "mounted" my iPhone with the app onto a tripod to take my photos.  They turned out a lot better than when I just held my iPhone and turned in a circle.) You will need to retrieve the URL of the panoramic photo you just uploaded.

Step 2 - Go to Bookry.com and look for the 360 Panorama widget.  (Bookry is so awesome, I can't say enough about the amazing tools available for creating your iBooks.) You will fill out some info including the URL of your uploaded panorama. You will also need to upload the image for your widget.  This is where I added our "Don" logo that you could see all over the map.   

Don logos on map

After this you will be able to export a widget. If you are going to use multiple panoramas you'll have to do this multiple times.

Step 3 - Add your widget to your iBook.  Using iBooks Author I made a page and added a map of our campus. I then dragged and dropped the widgets onto the map.  One thing important to know during this process is that you can use ctrl-click (right-click, two-finger-click) to bring up the options "Send to Back" and "Bring to Front."  I had to play with this a little to make sure my widgets were on top of the map and not underneath it.

Step 4 - Adjust your widgets.  Its easy enough to put the widget on the map where you want them.  However, I struggled with making the logos as small as I wanted them to be.  There seems to be a limit to how small you can make the widget on the page. You can select the widget and drag the white boxes and make it as small as possible.  But I wanted it smaller so I used the Inspector to turn off the Title, Caption, and Background.  Then I increased the margin.  Increasing the margin shrunk the logo even more. 

Inspector widget settings

This finally made the logo look that way I wanted it to.

Step 5 - Publish and enjoy! 

That's it.  I think I included all of the steps. If you have a problem or questions or a suggestion I'd love to hear it.

I hope this is helpful.  If you use this process to make something I'd love to see it.  Please share!

How to Embed a Google Form in an iBook

Back in the beginning of November I figured out how to embed a Google form into an iBook using iBooks Author and a program called Hype. (Special thanks to @anthonydilaura for his help.) Then I tried to do it again a few days ago and realized I had forgotten how.   Oops.  So I decided to write this blog post that describes the process so I'll have a record of what to do. Even if no one else wants to do this  I know I'll be able to come back to this post when I forget the process again in a couple months.

First of all, Hype is not free.  Its about $50. I have not been able to find a free way to do this.  I am sure someone with more programming skills than me could do it.  I bet there's a way to do it with Xcode developer tools but I don't know how to do that.

Also, some of the Google form settings I will describe are specific to a Google Apps for Education school.  Its probably simpler with a regular, free Google account.

Step 1 - Create a Google form.

Step 2 - Be sure to uncheck all of the boxes (see pic). I left "Require Cathedral . . ." checked and it caused all sorts of problems.  Of course, this means student could submit responses anonymously but I guess that's the trade-off.

Step 3 - Open Hype and start a new project. Use the Document Inspector to choose the page size you will use (I use iBooks Standard Widescreen).

Step 4 - Go to Insert Elements and choose HTML Widget.

Step 5 - Click little pencil icon and a box will appear. This is where we want to paste our embed code.

Step 6 - Go back to your Google form and copy the embed code.

Step 7 - Paste that code into the iframe window in Hype. Your Google form should appear.

I also like to stretch it out (drag the little circles) so it fills the whole page. This will take a little trial and error to see what you like best.

Step 8 - Export it as an iBooks Author Widget.  I like to save it to my desktop.

You should see a file that looks like this:

Step 10 - Open your iBooks Author project and drag and drop your widget to wherever you'd like it to be in your book. You can use the Inspector to make layout changes.

Step 11- Publish your iBook and enjoy the responses you will receive from your Google form!

Here's what it looks like in the iBook:

And after you tap the widget it looks like this:

If you have any questions or any feedback or any problems I'd love to hear about it.