Skip to main content

Integrating Oracle APEX with Google Maps | Find Your Location

To integrate Oracle APEX with Google Maps | Find Your Location,

I have followed below steps.

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

Step 2: Create static region with two page hidden items p1_latitude, p1_longitude and region button (Find My Location).

Note: Button action should be "Defined by Dynamic Action".

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: 8
    });
}
</script> 
    
<script src = "https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&libraries=places&callback=initMap" async defer> 
</script>

Note:
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_API_KEY&libraries=places&callback=initMap" async defer> 
</script>

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


Step 6: Create Dynamic Action, it should fire when you click on button "Find My Location".

True Action: Execute JavaScript Code. (Copy and Paste below JS in JS section)

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

// Try HTML5 geolocation.
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        $('#P1_LATITUDE').val(position.coords.latitude);
        $('#P1_LONGITUDE').val(position.coords.longitude);
        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        map.setCenter(pos);
    }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
    });
} else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesnot support geolocation.');
}

Output: The moment you click on button "Find My Location", you will have a output as like below.

Fig 1: Location Found.

Fig 2: Error Found.

Error Description:

Note that when using the geolocation API and especially when you’re running your page in Google Chrome, the address from which you run your page must be secure (HTTPS). If you’re running local, then no worries as your localhost is considered secure. 

If you’re testing on http://apex.oracle.com there are no issues too. If you have problems due to being on HTTP and not HTTPS, try another browser like Mozilla/IE.

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