using Google Map API with AppFurnace - part 1

The AppFurnace Map objects use the Google Maps API, but for some reason they have been wrapped in a way that doesn't allow any further configuration of the Google Map. It is not possible to configure an AppFurnace map to allow the user to drop markers....

... but we need this functionality (as described in this post about the portable versions of Hermes) - so I developed a technique.

Here's the technique step-by-step

  1. create AppFurnace IFrame
  2. name the IFrame element
  3. direct the IFrame to load an HTML file which uses the google map API
  4. configure the google map API to allow the user to drop markers
  5. interrogate the google map API frame
  6. create AppFurnace Geo elements at co-ordinates indicated by the google map markers

Let's begin. 

First set up an AppFurnace screen called 'index' and configure this code to run when it is shown. 

https://gist.github.com/1341914

AppFurnace IFrame objects create HTML DIV elements with IFrame elements inside. Unfortunately frame.setSrc() doesn't allow the developer to specify the name attribute or id attribute for the DIV element, nor does it add these to the inner IFrame element. They just look like this:

https://gist.github.com/1342668

Without named elements, it will be extremely difficult to determine the co-ordinates of any markers that the user has dropped... The solution is to use a rejig function to create a (named) DIV and poke our own (named) IFrame inside such that the result looks like this:

https://gist.github.com/1342670

The AppFurnace code to accomplish this is defined in 'rejigTheFrame' below:

https://gist.github.com/1341952

----

In another post (coming up soon) we'll write HTML/Javascript to configure the Google Map API to allow the user to drop markers. We'll then interrogate the map IFrame to retrieve the co-ordinates of dropped markers, and finally we'll iteratively create AppFurnace Geo objects using the co-ordinates of the markers.

112 views and 0 responses