Skip to main content

Posts

Showing posts from March, 2020

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...

Integrating Oracle APEX with Google Maps | Spot the Location & Get the Address by Providing Latitude & Longitude

Integrating Oracle APEX with Google Maps | Spot the location & Get the Address by Providing Latitude & Longitude, I have followed below steps. Step 1:  Google API Key must be obtained. Get  Google API Key . Step 2:  Create static region with three page items  p1_latitude, p1_longitude and p1_address  and region button (To locate the location and get the address). Note:  Button action should be "submit page". Page item type should be "text/number". Make page item  p1_address   read-only as below. 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. < scrip...

Reverse Geocoding

To integrate Oracle APEX with Google Maps | Reverse Geocoding, I have followed below steps. Step 1:  Google API Key must be obtained. Get  Google API Key . Step 2:  Create a page. Step 5:  Add below js in Page HTML Header. <!DOCTYPE html> <html> <head>     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">     <meta charset="utf-8">     <title>Reverse Geocoding</title>     <style>         /* 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. */          ...

Integrating Oracle APEX with Google Maps | Spot the Location by Providing Multiple Latitude & Longitude

To integrate Oracle APEX with Google Maps | Spot the Location by Providing Multiple Latitude & Longitude, I have followed below steps. Step 1:  Google API Key must be obtained. Get  Google API Key . Step 2:  Create required objects (Table, Sequence, Trigger). CREATE TABLE fxgn_map_locations   (     location_id        NUMBER,     location_name      VARCHAR2(500),     country            VARCHAR2(300),     latitude           NUMBER,     longitude          NUMBER,     updated_by         VARCHAR2(50),     updated_on         DATE,     row_version_number NUMBER   ); CREATE SEQUENCE fxgn_map_locations_s START WITH 1 INCREMENT BY 1; CREATE OR REPLACE TRIGGER fxgn_map_locati...

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 '), {  ...