Skip to main content

Integrating Oracle APEX with Google Maps | Spot the Location by Providing Address/Location

To integrate Oracle APEX with Google Maps | Spot the Location by Providing Address/Location,
I have followed below steps.

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

Step 2: Create static region with page item p1_address (To get address) and region button (For search).

Note: Button action should be "submit page". Page item type should be "text".

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();  
     geocodeAddress(geocoder, map);  
  }  

  function geocodeAddress(geocoder, resultsMap) {  
     var address = document.getElementById('p1_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_MAP_API_KEY&libraries=places&callback=initMap" async defer></script>

Note: 
p1_address - Run time parameter, to get 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:

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  ...
9 comments
Read more