Integrating Google Maps with ADF

This is a simple example how to integrate Google Maps to your ADF application.

1.  In order to run this application you must subscribe to the Google Map API. This can be done from the following web site.

http://code.google.com/apis/maps/signup.html

This will provide you with a key to access the API at run time.

2. Before we can start our ADF application we need to create a data source. In this example I create a HOUSES table, this table provide the longitude and latitude coordinates required for Google Maps.

Use the following file to create the HOUSES table:

Use the following file for the data:

Use the following for the SQL Loader control file:

3. Execute the create_houses.sql is a SQLPlus session to a schema of your choice. I have used the HR schema.

4. Copy the HOUSES.csv and load_houses.ctl into the same directory somewhere on you OS, e.g. c:\temp.

5. From that location execute the following command, all on one line.

sqlldr userid=hr/hr control=load_houses.ctl log=load_houses.log bad=load_houses.bad data=HOUSES.csv discard=load_houses.discard

6. Check that the HOUSES table has been loaded

SQL> select count(*) from houses;

  COUNT(*)
----------
        34

7. You are now ready to create your ADF Application. Create a new Fusion Web Application (ADF) called GoogleMap and click Next

image

image

8. Accept the defaults and click Finish

image

9. Right-click the model project and select New. From the gallery select Business Tier -> ADF Business Components -> Business Components from Tables

image

10. Create a new database connection based on the schema where you loaded the HOUSES table.

image

11. Query the schema and select the HOUSES table and click Next.

image

 

 

 

 

 

 

 

12. Move the HOUSES table to be selected and click Finish

image

13. Now the data source has been created we can implement the user interface, Right-click the ViewController project and select New

image

14. Select JSF Page, found in the Gallery under Web Tier -> JSF

image

15. Call the JSF page HouseLocation.jspx, ensure that the Blank Page radio button has been selected. Click OK

image

16. From the Component Pallet, drag Panel Splitter into the middle of the JSF page.

image

17. From the Data Control drag the HousesView1 into the First Panel. Choose Table -> ADF Read-Only Table

image

18. Check the Row Selection, Filtering, and Sorting checkboxes, and click OK

image

19. To integrate Google Maps to ADF we must customise the source to add the Google Maps APIs. Click the source tab of your jspx page.

20.  The first bit of code we will implement is the Google Map functions. There are 2 functions we create, an initialisation function, and a an implementation function so when the user selects a row it will pass the coordinates to Google Maps.

Copy this code into your jspx source, just after </af:form> and before </af:document> at the bottom of the source.

Also change the key=ABCD to the key you got when you subscribed to the Google API.

      <f:facet name="metaContainer">
        <af:resource type="javascript" source="
http://www.google.com/jsapi?key=ABCD"/>
        <af:resource type="javascript"> google.load("maps", "2.x");
                    // Call this function when the page has been loaded
                    function initialize() {
                    var map = new google.maps.Map2(document.getElementById("map"));
                    map.setCenter(new google.maps.LatLng(0,0), 1);
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    }
                    google.setOnLoadCallback(initialize);
        </af:resource>
        <af:resource type="javascript">
                          function doNavigate(evt)
                          { long = evt.getSource().getProperty("long");
                            lat = evt.getSource().getProperty("lat");

                            var latlng = new GLatLng(lat,long);
                            var map = new google.maps.Map2(document.getElementById("map"));             

                            map.addControl(new GLargeMapControl());
                            map.addControl(new GMapTypeControl());

                            map.setCenter(new GLatLng(lat,long), 16);
                            map.addOverlay(new GMarker(latlng));
                          }
        </af:resource>
      </f:facet>

21. Replace the code <f:facet name="second"/> with the following

             <f:facet name="second">
                <af:group>
                  <div id="map" style="width: 800px; height: 800px"></div>
                </af:group>
              </f:facet>

 

 

 

 

 

 

 

This code draws the map in the second splitter.

22. The final code is implementing the client listeners for user interaction so when the use selects an ID the location will be shown on the map. To do this we must edit the ID field to listen for user interaction and pass the parameters to the functions implemented in step 20.

Find the code:

                <af:outputText value="#{row.Id}" id="ot2">
                  <af:convertNumber groupingUsed="false"
                                    pattern="#{bindings.HousesView1.hints.Id.format}"/>
                </af:outputText>

And replace to look like this

                      <af:outputText value="#{row.Id}">
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.HousesView1.hints.Id.format}"/>
                        <af:clientAttribute name="lat" value="#{row.Latitude}"/>
                        <af:clientAttribute name="long" value="#{row.Longitude}"/>
                        <af:clientListener method="doNavigate" type="click"/>
                      </af:outputText>

Save you work

23. Now it is time to test, Right-click on the HouseLocation.jspx and select Run

When the application starts in your browser, click on any ID in the ID column. The location should show on the map as shown below.

image

Comments:

Hi,
I am using ADF 11g(11.1.1.3.0) and I am integrating a javascript map (like google maps).

This map works really similar to google maps: its javascript based, and requres a
inside the page to inject the map.

I followed this tutorial
to integrate the map, and in fact I can see it, but a lot of map features (like pan for example) do not work.

If I put the map in a simple HTML, it works flawlesslly.

Why ?

It seems like the javascript is limited inside the jspx.

Posted by Ghepardo on February 07, 2011 at 04:12 PM GMT+13:00 #

Although this is implemented javascript we are calling the Google Maps APIs so it should be independent. This example does not pan either, you need to use the Google Map navigators.

cheers
James

Posted by James Taylor on February 08, 2011 at 09:52 AM GMT+13:00 #

Can we integrate the Control of GeoMap Of the JDeveloper Components with Google Maps

Posted by guest on March 05, 2012 at 12:07 AM GMT+13:00 #

I'm not aware of any integration. I use Google maps for quick map representation on a form. I work outside the US so getting map viewer going can be time consuming.

cheers
James

Posted by James Taylor on March 05, 2012 at 10:59 AM GMT+13:00 #

while loading CSV it case if getting Error,

D:\ADF\GoogleMaps>sqlldr userid=hr/hr control=load_houses.ctl log=load_houses.lo
g bad=load_houses.bad data=HOUSES.csv discard=load_houses.discard

SQL*Loader: Release 10.2.0.1.0 - Production on Mon Mar 12 20:31:04 2012

Copyright (c) 1982, 2005, Oracle. All rights reserved.

SQL*Loader-350: Syntax error at line 1.
Expecting keyword LOAD, found end of file.

can u please give some solution.

Posted by guest on March 13, 2012 at 04:01 AM GMT+13:00 #

The blog seems to have droped the format of the file. It looks like the CTL file has been placed on one row. If you remove everything before LOAD from the CTL file it should work, e.g.

LOAD DATA INTO TABLE HOUSES ...

cheers
James

Posted by james.x.taylor@oracle.com on March 14, 2012 at 06:32 PM GMT+13:00 #

FYI You can use Google maps as the base map for Oracle Mapviewer and therefore use the <dvt:map> component plus all the layering capabilities of mapveiwer.
See: http://oraclemaps.blogspot.co.uk/2009/10/google-maps-tiles-in-mapviewer-app.html

Posted by Duncan on April 25, 2012 at 08:48 PM GMT+13:00 #

Hi,

Great tutorial - thanks so much.

If I wanted to populate markers for all the lat/long combinations in the table on page load, what would be the best way to do that (i.e. how do I get a bunch of data from a backing bean into the 'initialize()' function)?

many thanks,
Dazster

Posted by Dazster on March 07, 2013 at 05:45 PM GMT+13:00 #

I haven't done this, but it really comes down to how good your javascript is.

I have seen this blog in the past that does it but I don't really like the solution. I'm sure you could use the code to get the information from the Data control.

http://redstack.wordpress.com/2010/08/03/adding-location-based-search-to-urm-or-ucm-using-google-maps/

cheers
James

Posted by James Taylor on March 07, 2013 at 10:56 PM GMT+13:00 #

I have implemented same scenario but when i click on id column ,nothing happen on map
please tell about this

Posted by Ashish on March 16, 2013 at 10:10 PM GMT+13:00 #

The things to check are step 22. This basically sets the listener for the ID fields and populate the long lat values.

I'm not sure if you have changed the javascript at all, but the method 'doNavigate' in step 22, has to be called in the javascript.

cheers
James

Posted by guest on March 21, 2013 at 10:23 AM GMT+13:00 #

Thanx James,
It is working now, but please tell me can we get location on maps by address not by longitude or latitude.
and how can we implement reverse geocoding in Oracle ADF?

Posted by Ashish Awasthi on March 21, 2013 at 05:57 PM GMT+13:00 #

I will create a post to help with this over the weekend.

In the meantime I have created a placeholder blog post to help you.

https://blogs.oracle.com/middleware/entry/searching_google_maps_with_adf I will provide better instructions in the next few days.

cheers
James

Posted by guest on March 22, 2013 at 10:09 AM GMT+13:00 #

Hi,
i have a problem with this source, i must reload the page for get this <af:resource type="javascript" source="https://www.google.com/jsapi?key=[API Key]"/>
i dont know why but later all work fine :S
can you help me?
thx

Posted by quitos on April 12, 2013 at 04:45 AM GMT+13:00 #

You may need to enable autosubmit on the row id. This will force a refresh on the page.

cheers
James

Posted by guest on April 12, 2013 at 11:55 AM GMT+13:00 #

Hi ,

I am doing the same with Oracle Spatial's Mapviewer .
Using the above method ,for particular row i am getting the Latitude and Longitude in java script and plotting the points.

Is there any way to get the points for multiple rows .

Thanx

Shabnam

Posted by Shabnam on May 03, 2013 at 12:59 AM GMT+13:00 #

If you are using Mapviewer there is a Map component, if you have a table with the long / lat fields in them its just a matter of dragging the table from your data control and make it a map component (As you would do to make a table, form, or graph, etc). Then it is just a matter of setting the x and y values. These will be your long / lat fields on the table.

here is a good youtube clip that give a good introduction

https://blogs.oracle.com/shay/entry/working_with_the_adf_dvt

cheers
James

Posted by guest on May 03, 2013 at 10:09 AM GMT+13:00 #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Discussions and Examples using Oracle Fusion Middleware. Some image links are broken when using Firefox, Safari, and Chrome. If you want to see the full image please use IE.

Twitter:@james8001

tumblr hit counter vistors, thanks for your support

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today