Posts

Showing posts from March, 2020

Integrating Oracle APEX with Google Maps | Find Your Location

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

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

Image
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. < script >     var map; function initMap() {     map = new google.maps.Map(document.getElementById(' googlemap '), {  

Reverse Geocoding

Image
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. */                  html,         body {             height: 100%;             margin: 0;             padding: 0;         }                  #floating-panel {             position: absolute;             top:

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

Image
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_locations_biu BEFORE   INSERT OR   UPDATE ON fxgn_map_locations FOR EACH ROW BEGIN IF inserting   AND :NEW.location_id IS NULL THEN   SELECT fxgn_map_locations_s.nextval INTO :NEW.location_id FROM dual; END IF; IF (inserting OR updating) THEN   IF (:NEW.updated_on IS NUL

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

Image
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          });