Skip to main content

Integrating Oracle APEX with Google Maps | Spot the Location & Get the Address by Providing Latitude & Longitude

Integrating Oracle APEX with Google Maps | Spot the location & Get the Address by Providing Latitude & Longitude,
I have followed below steps.

Step 1: Google API Key must be obtained. Get Google API Key.

Step 2: Create static region with three page items p1_latitude, p1_longitude and p1_address and region button (To locate the location and get the address).

Note: Button action should be "submit page". Page item type should be "text/number". Make page item p1_address read-only as below.



Step 3: Create static region with static ID: googlemap.

Step 4: Add custom CSS in Inline CSS.

 #googlemap {           
     height: 600px !important;         

  } 

Note: Normal Page - Height: 600px; | Modal Dialog - Height: 400px;.

Step 5: Add below js in Page HTML Header.

< script >
    var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('googlemap'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 15
    });
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow;
    geocodeLatLng(geocoder, map, infowindow);
}

function geocodeLatLng(geocoder, map, infowindow) {
    var lat = document.getElementById('P1_LATITUDE').value;
    var lng = document.getElementById('P1_LONGITUDE').value;
    var latlng = {
        lat: parseFloat(lat),
        lng: parseFloat(lng)
    };
    geocoder.geocode({
        'location': latlng
    }, function(results, status) {
        if (status === 'OK') {
            if (results[0]) {
                map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[0].formatted_address);
                $('#P1_ADDRESS').val(results[0].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocode was not successful for the following reason: ' + status);
        }
    });
} < /script>  

< script src = "https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&libraries=places&callback=initMap"
async defer > < /script>

Note: 
p1_latitude - Run time parameter, to get latitude.
p1_longitude - Run time parameter, to get longitude.
p1_address - On which we are populating the address.
googlemap - Static ID for that particular region or division.

In the end of code, you can find link,

 <script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAP_API_KEY&libraries=places&callback=initMap" async defer></script>

You must replace MY_GOOGLE_MAP_API_KEY with your valid Google MAP API Key.

Output: The moment you click on button "Set Location/Address", you will have an output as like below.

That's it. Happy APExing!!!...

Faced Issues: I would like to share all the issues which i faced when i was integrating Oracle APEX with Google Maps.

Comments

Post a Comment

Popular posts from this blog

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Here I am giving an example to print the page numbers dynamically in the RTF (Rich Text Format) template. Step 1:  Go to page footer and copy and paste the below script. Page |  <?fo:page-number?>  of  <?fo:page-number-citation:xdofo:lastpage-joinseq?> <fo:page-number> :   This is the object, which is used to represent the current page-number. <?fo:page-number-citation:xdofo:lastpage-joinseq?> :  This is the syntax, which is used to represent the total number of pages. Step 2:  Load the XML and preview the result. Output: That's it. References: fo:page-number Printing Page Number Code in Oracle XMLP RTF Template
2 comments
Read more

Generating the report with APEX_DATA_EXPORT

With the APEX_DATA_EXPORT package, you are able to export data from Oracle Application Express in the following file types: PDF, XLSX, HTML, CSV, XML, and JSON. Step 1: Create a table and populate it with some sample records. CREATE TABLE emp   (     empno        NUMBER,     first_name   VARCHAR2(240),     last_name    VARCHAR2(240),     mgr          NUMBER,     deptno       NUMBER,     sal          NUMBER,     created_date TIMESTAMP (6),     comm         NUMBER,     hiredate     DATE,     JOB          VARCHAR2(240),     ename        VARCHAR2(240),     PRIMARY KEY (empno) USING INDEX ENABLE   ); /    INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (1, 'Larry', 'Ellison', ,                  10, 5000, LOCALTIMESTAMP);   INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (2, 'Juan', 'Juan', 1,  
5 comments
Read more

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Here I am giving an example to save selected interactive grid records into a oracle apex collection. Step 1: Create a new blank page. Note: Mine was page 20. You will need to update reference to " P20 " with your page number if it's different. Step 2: Create a new interactive grid report region to the page using below query. Set Static Id "EmpDetails" to the region. SELECT  *     FROM   ( SELECT  emp . empno ,                emp . ename ,                emp . JOB ,                dept . dname department ,                dept . loc  LOCATION ,                mgr . ename  manager ,                emp . hiredate ,                 nvl ( emp . sal , 0 )  salary ,                 nvl ( emp . comm , 0 )  commission            FROM  eba_demo_chart_emp emp ,                eba_demo_chart_dept dept ,                eba_demo_chart_emp mgr           WHERE  emp . deptno = dept . deptno             AND  emp . mgr      = mgr . empno  ( + )           ORDER   BY  emp . ename
9 comments
Read more