Using Oracle Apex with Google APIs maps and blogger

In order to add some google feature inside an Apex page, one have just to had some piece of code in header or footer part of a static region.

• Add a new blank page or go the second step if there is an existing page
• Add a static region into body content
• Add the following piece of code in the HEADER TEXT part (in the right property sheet)

For a MAP

<div id="map1" style="min-height: 700px" width="100%"></div>

<script>

      var map;

      function initMap() {

        map = new google.maps.Map(document.getElementById('map1'), {

          center: {lat: -14.245413, lng: -72.477596},

          zoom: 7,

            mapTypeControl: false,

        mapTypeControlOptions: {

        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

        },

        navigationControl: true,

        navigationControlOptions: {

           style: google.maps.NavigationControlStyle.SMALL,

           position: google.maps.ControlPosition.TOP_RIGHT

        },

        scaleControl: true,

        streetViewControl: false,

        mapTypeId: google.maps.MapTypeId.ROADMAP        

        });

         

// Optionnal: Draw a circuit 

          circuit();            

      }

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>&callback=initMap"

    async defer>

   

</script>

Optionnal: Drawing of a circuit:

function circuit() {
var myCoordinates = [
new google.maps.LatLng(-12.060809,-77.014160),
new google.maps.LatLng(-16.425548,-71.520996), 

..... 

new google.maps.LatLng(-12.060809,-77.025146)
];


var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
}

For a BLOG

<div id="blog"></div>

    <script>

      function displayBlog(response) {

        document.getElementById("blog").innerHTML += response.content;

      }

    </script>

<script src="https://www.googleapis.com/blogger/v3/blogs/<YOUR BLOG ID>/posts/<YOUR POST ID>?key=<YOUR KEY>&fields=content&callback=displayBlog"

    async defer>

   

</script>

Notes: It's mandatory to get before an API key from the Google developper console.
Depending tke kind of API, there are some daily quotas (not a big deal for personal user sites)

In the above MAP sample, there is not yet a resize feature.