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

Oracle Application Express Views (APEX)

Application Express Views Search SELECT * FROM apex_dictionary WHERE column_id = 0; View Comment Parent View APEX_APPLICATIONS Applications defined in the current workspace or database user. APEX_WORKSPACES APEX_APPLICATION_ALL_AUTH All authorization schemes for all components by Application APEX_APPLICATIONS
Post a Comment
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