How to integrate Google Maps with ADF applicatiIon

How to integrate Google Maps with ADF application…

Today I am going to demonstrate how to integrate google maps API within your application.

Often we come across requirement to show Google maps within our application where user will click on city or location name and accordingly location should be highlighted in google map.

The solution is very simple to integrate…

1)      Create Location table put fields id, locationName,Latitude,Longitude…

2)      Create ADF Fusion application

3)      Create JSF page

4)      In Model Project Create Business Component from table by selecting Location table you created

5)      Drag and Drop Panel Splitter within JSF Page

6)      In one Facet of splitter Drag and Drop Location View Object from Data Control…

7)      Replace Location Name column with following code…

<af:column sortProperty="#{bindings.JgLocationsView2.hints.LocationName.name}"

                                                           filterable="true" sortable="true"

                                                           headerText="#{bindings.JgLocationsView2.hints.LocationName.label}"

                                                           id="c4">

                                                                      <af:outputText value="#{row.LocationName}"

                                                                   shortDesc="#{bindings.JgLocationsView2.hints.LocationName.tooltip}"

                                                                   id="ot4" >

                                                                   <af:clientAttribute name="lat" value="#{row.Latitude}"/>

                                                                    <af:clientAttribute name="long" value="#{row.Longitude}"/>

                                                                    <af:clientListener method="doNavigate" type="click"/>

                                              </af:outputText>

        </af:column>

8)      Replace Second Facet with following line of code…

<f:facet name="metaContainer">

        <af:resource type="javascript" source="http://www.google.com/jsapi?key=AIzaSyBICigoNf4GQVzrdL03_d3Cw1RgucoYvJA"/>

        <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>

Enjoy Google Map !!!