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.

< 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();

    var infowindow = new google.maps.InfoWindow;

    geocodeLatLng(geocoder, map, infowindow);

}

function geocodeLatLng(geocoder, map, infowindow) {

    var lat = document.getElementById('P1_LATITUDE').value;

    var lng = document.getElementById('P1_LONGITUDE').value;

    var latlng = {

        lat: parseFloat(lat),

        lng: parseFloat(lng)

    };

    geocoder.geocode({

        'location': latlng

    }, function(results, status) {

        if (status === 'OK') {

            if (results[0]) {

                map.setZoom(11);

                var marker = new google.maps.Marker({

                    position: latlng,

                    map: map

                });

                infowindow.setContent(results[0].formatted_address);

                $('#P1_ADDRESS').val(results[0].formatted_address);

                infowindow.open(map, marker);

            } else {

                window.alert('No results found');

            }

        } else {

            window.alert('Geocode was not successful for the following reason: ' + status);

        }

    });

} < /script>  

< script src = "https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&libraries=places&callback=initMap"

async defer > < /script>

Note: 

p1_latitude - Run time parameter, to get latitude.

p1_longitude - Run time parameter, to get longitude.

p1_address - On which we are populating the 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: The moment you click on button "Set Location/Address", you will have an output as like below.

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.

• ApiNotActivatedMapError

• Google API REQUEST_DENIED [This API project is not authorized to use this API]

• Geocoding Service: You must enable Billing on the Google Cloud Project

• RefererNotAllowedMapError

References: 

• https://developers.google.com/maps/documentation/javascript/tutorial
• https://developers.google.com/maps/documentation/javascript/error-messages
• https://developers.google.com/maps/documentation/geocoding/intro
• https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

Related Post:

• Integrating Oracle APEX with Google Maps | Spot the Location by Providing Multiple Latitude & Longitude
• Integrating Oracle APEX with Google Maps | Spot the Location by Providing Address/Location
• Integrating Oracle APEX with Google Maps | Find Your Location
• Reverse Geocoding