Oracle Forms 11g and Google maps integration

In last years blog post about Forms 11g Javascript integration I explained how you could call the Google Maps API from forms using JavaScript.

I captured that testcase using screentoaster.
It seems that this tool has disappeared and all the recorded sessions with it.

So, here’s a new video on youtube of this Google Map Integration, now in a demo application.
The Form is embedded in a HTML page witch contains a Google Map.

Oracle Open World 2010: Forms in the Middle of Middleware

People attending Open World to have a closer look at fusion technologies and how to integrate them in your existing applications, need to check out the following session:

  • ID#: S315945
  • Title: Oracle Forms in the Middle of Middleware with Oracle Product Management
  • Track: Application Servers, Application Grid, and Development
  • Date: 22-SEP-10 Time: 13:00 – 14:00
  • Venue: Marriott Marquis Room: Salon 9

Together with Grant Ronald we will talk you through the possible scenario’s to modernize your existing forms applications. After each scenario we will demo the functionalities and showcase some of the success stories we’ve conducted together with our benelux customers.

The different scenario’s include upgrading to 11g to use the event-driven architecture, integrate with existing applications such as apex, .net, google maps, bpel, …

In other words if you’re using fusion technologies such as BPEL, OSB, ADF, … you can easily integrate these with your existing forms applications using the new features provided in 11g.

Forms 11g javascript integration: Call others

Forms 11g holds a lot of interesting new features focused on event-driven architecture, one of these is javascript integration. There are two ways of using javascript with Forms 11g: “call others” and “let others call you”.

Javascript can call code in Forms(“Let others call you”) using the new forms trigger “when-custom-javacript-event”.

This post is going to show you the first one: “call others”, in other words call javascript from your Oracle Forms application.

During the Forms Modernization Seminar I showed a google map that could be manipulated from an Oracle Form. It’s an easy implementation with only a few lines of code(most of the javascript is taken from the api examples on the google code site:

  • Build a little form with one (control) block, one text field(to enter an address) and one button(to call the javascript code).
  • Next step is to create an HTML-page to display the form.

This code puts the form(in an iframe) and the map side by side:
(Click to enlarge)

And it will look like this:

  • The javascript that will be called is put in another file google.js:

  • The only thing to do is creating a “when-button-pressed” trigger in forms to call the javascript function showAddress.
    This is done by a new built-in procedure web.javascript_eval_expr:
  • Copy the HTML and javascript file to the following directory:
  • Create a new configuration using Enterprise Manager:

  • Make sure the parameter EnableJavascriptEvent is set to “true’ in your configuration!

And the working demo…

Integrate Google Maps into your ApEx application

Google Maps, a free service from google that offers dynamic and interactive maps, offers a Google Map API so developers can integrate the service into their website or application.

The first thing you need to do is to register with Google. Then you can go to Google Maps API page and sign up. Save the example code and the key so you can use it later.

Now we implement it into an ApEx page:

Create a new Page with an html region. Go to Edit page and perform the next action:

DisplayAttributes: Put “Cursor Focus” on “Do not focus cursor”.

HTML Header
: Copy your JavaScript into the HTML header, this script will call the map. You can call several classes to customize the controls on your map.

On Load: You will call the JavaScript to start the map when the page loads.

Now you can go to edit the html region and specify the location of the map:

Source: In source we place the div-tags where the map will show and its width and height.

Finally run your page:

Customize your map:

More info about how to customize your map with other default locations and buttons can be found here.

An example with a customized map can be found here.