APEX

Hi,

I am using APEX 19.1, DB 12.

I have a Static Content Region to show Google Map in my page.

The code in the static content is

<div id="map"></div>
<script>
    var map;
    var mapKey = document.getElementById("P3_G_MAP_KEY").value ;
    var latitude = Number(document.getElementById("P3_LAT").value);
    var longitude = Number(document.getElementById("P3_LONG").value);
    console.log(latitude || ' --- ' || longitude);
    function initMap() {
        var myLatLng = {
            lat: latitude,
            lng: longitude
        };
     var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatLng
        });
     var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
            //title: 'Hello World!'
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_MAP_KEY>&callback=initMap" async defer></script> 

In the last line if I hardcode <MY_GOOGLE_MAP_KEY> with value like ABCDEFGHIJK... the map works fine.

But I want to substitute the value with mapKey which I get in line 4. This is coming from DB using a computation. The console.log(mapKey) shows correct value.

If I try like below, nothing works, the region is blank.

<script src="https://maps.googleapis.com/maps/api/js?key="+ mapKey +"&callback=initMap" async defer></script>

Please suggest.

Thanks,

Veerendra