Oracle Apex and Google Maps

Hi all,

Recently I searched for integration Oracle APEX and Google Maps and found very good blog post from Farzad Soltani on Introduction to Implementing Google Maps in Oracle APEX Applications but that was not what I really need. So I continued to search for solution for "Searching the Address and get results on the Map" and I found it on Maps JavaScript API where you can find other solutions regarding Google maps. By implementation of Integration Google maps with Oracle APEX I followed some steps from Farzad Blog, but here I will explain step by step how I did that.

1. I Created Static Region with static ID : googlemap and placed following code in its
    source:

 <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();  
     geocodeAddress(geocoder, map);  
  }  
  function geocodeAddress(geocoder, resultsMap) {  
     var address = document.getElementById('P2_ADDRESS').value;  
     geocoder.geocode({'address': address}, function(results, status) {  
      if (status === 'OK') {  
       resultsMap.setCenter(results[0].geometry.location);  
       var marker = new google.maps.Marker({  
        map: resultsMap,  
        position: results[0].geometry.location  
       });  
       var infoWindow = new google.maps.InfoWindow({  
           content: address  
        });  
       google.maps.event.addListener(marker, 'click', function () {  
           infoWindow.open(map, marker);  
       });  
      } else {  
       alert('Geocode was not successful for the following reason: ' + status);  
      }  
     });  
    }  
 </script>  
 <script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap" async defer></script>  

as we can See, we have two JavaScript Function InitMap and geocodeAddress, initMap is for Map initialization and geocodeAddress is for searching address. In initMap we are calling function geocodeAddress in which you can find line of code where we get value from item P2_ADDRESS which we will create later.


In the end of Code, you can find the link 


https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap

as Farzad in his blog explained

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 https://console.developers.google.com/apis/credentials and get your hands on a KEY by signing up for a free one using your Gmail account.

Second thing in link which is also very important is callback function, where we calling our JavaScript function for map initialization in our example initMap


2. Add custom CSS in inline CSS Page field

  #googlemap {           
     height: 600px !important;         
  }  

3. Another Static Region with Page Item P2_ADDRESS type text and Region Button search

4. Dynamic action with event on Button click Search and actions 

    EXECUTE PL/SQL code

null;

Page Items submit: P2_ADDRESS

    EXECUTE JavaScript Code 

initMap();

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

demo username/password: demo/demo


If You have any Question feel free to ask.

Till next time!