Introduction to Implementing Google Maps in Oracle APEX Applications

In this post I will be presenting an introduction on how to begin implementing Google Maps and the Google Maps API in your applications.

Well, I’m going to dive right in. This introduction is going to be quite short, but I think it will give you a good overview of how you can implement complex map functionalities in your pages.

So what you need to do is create a  page that contains a region of type “Static Content”.

Place the following markup in its source :

<!DOCTYPE html>

 <title>Simple Map</title>
 <meta name="viewport" content="initial-scale=1.0">
 <meta charset="utf-8">
 /* Always set the map height explicitly to define the size of the div * element that contains the map. */
 #map {
 height: 100%;
 /* Optional: Makes the sample page fill the window. */
 body {
 height: 100%;
 margin: 0;
 padding: 0;
 #mapp .t-Region-body {
 height: 600px !important;

 <div id="map"></div>
 var map;

 function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
 center: {
 lat: -34.397,
 lng: 150.644
 zoom: 8
 <script src="" async defer></script>


Notice that in the ending <script> tag right before the closing </body> tag, I have written MY_GOOGLE_APP_KEY. A Google API Key must be obtained and placed instead of MY_GOOGLE_APP_KEY.

In order to obtain a Google API Key, refer to and get your hands on a KEY by signing up for a free one using your Gmail account.

What we’re going to do in this example, is ask the user to allow access to their current location via the browser, and to relocate the map view to their current location and also show the longitude and latitude values in two simple page items.

The next step is creating these two items, which in my case are called P4_LATITUDE and P4_LONGITUDE. Also there’s going to be a button which I called FIND_LOCATION.

Create a dynamic action on the FIND_LOCATION button, which is triggered on the Click event. Create a true action for this dynamic action which executes the javascript code below :

var map = new google.maps.Map(document.getElementById('map'), {
 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

 infoWindow.setContent('Location found.');
 }, function() {
 handleLocationError(true, infoWindow, map.getCenter());
} else {
 // Browser doesn't support Geolocation
 handleLocationError(false, infoWindow, map.getCenter());

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

In the above code, you must replace P4_LATITUDE and P4_LONGITUDE with the names you chose for your two items above.

In addition, it’s wise to add some custom CSS to the map region. What I did was give the region a static ID with the value of “mapp” and added this CSS.

#map {
 height: 100%;
#mapp .t-Region-body {
 height: 600px !important;

This is what the end result looks like (you can click on any of the images to open it in a new tab) :

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 there are no issues too. If you have problems due to being on HTTP and not HTTPS, try another browser like Mozilla Firefox for testing or run chrome with the following parameters to override the check for being run from a secure location :



Here is the link to a working demo of the method above :

I hope you enjoyed reading this blog post. In the near future I will post about more features that can be played around with.

As always, don’t hesitate to contact me for any technical issues/questions/requests.

Till next time.

46,578 total views, 16 views today

22 Replies to “Introduction to Implementing Google Maps in Oracle APEX Applications”

  1. great work! well done ! Many thanks.
    I have linked to it from my BLOG:
    I am working with APEX (and HTMLDB) since its beginning and carried out many workshops teaching APEX to customers.
    This during my 15 years at Oracle in Germany!
    Take care!!

    1. Hi Abid. Do you see any errors in the console?

      You can try replicating it on and I might be able to help you more.

  2. I followed all steps but it doesn’t work.. Can you give us link to download demo that you have done with source.?

  3. Nice work!

    I got error implementing. Can you help?

    Oops! Something went wrong.
    This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

  4. It does not work on an apex region… when I put all the code in the page header it does work. However, I need this to be in an apex region. Any suggestion why it is not working with apex region as you detail?

  5. great blog. its works well on my browsers. I am new to apex and i’m currently working on a project in apex. i want a user to enter in “P4_latitude” and “P4_longitude” to find on the map a remote location

  6. I followed all the steps, after entering Latitude, Longitude and click find location button, i am getting following Error and Map itself.

    Error : The Geolocation Service Failed!

    Please help me to slove the issue, urgent…

  7. This tutorial is great. Thank you.

    Is there a way to set the height to 100% instead of 600px? When I tried to change it, the entire map disappears.

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading Facebook Comments ...