Oracle Visual Builder Cloud Service(VBCS)でGoogle Mapを利用する手順をまとめておきます。

前提条件

Google Map APIの登録が完了していること
以下などを参考に登録してAPI Keyを取得しておく
https://www.zenrin-datacom.net/business/media/g001/
Oracle Cloudのアカウントを取得済みであること
VBCSのプロビジョニング(Oracle Integration Cloud Serviceでも可)が完了し、コンソールにアクセスできること

VBCSアプリケーションの作成

適当なVBCSアプリケーションを作成します。

適当なWebアプリケーションを作成します。

メインページの編集

(見栄えのため)main-start(メインページ)にヘッダを設定します。
Heading要素をドラッグアンドドロップで追加し、任意の値に変更します。

コード・モードに切り替え、以下のhtmlを追加します。
padding-top: 50%;の部分で表示するMapの高さを設定できます。

html

<div class="oj-flex">
  <h1 class="oj-flex-item oj-sm-12 oj-md-12">Google Map App</h1>
  <div id="map" class="oj-flex-item oj-sm-12 oj-md-11"></div>
</div>

<style type="text/css">
<!--
#map {
position: relative;
width: 100%;
height: 0;
padding-top: 50%; /* ajust map height here */
overflow: hidden;
}
-->
</style>

Google Map読み込み処理の設定

次にGoogle Map APIからMapを取り込む処理の設定をします。
JavaScriptタブを開き、以下のコードを追加します。

PageModule.prototype.Load = function() {

    var points = google.maps.geometry.encoding.decodePath(
      '_onagAjphtxDwuBz@SolKnlAg@bcA?fO?rmBSnZ?j{B?fT?bqDg@~sA?zkASbLS~jC?reA?~W?bj@Srq@g@v~@R~\\f@zaAjCnd@bBrq@zErb@~CzYjCfObBz^fEnn@bGngAvLvo@jCf|@f@jsA{@~a@Rja@SzJSfTg@fc@{@jHbB~p@kC~z@cGfEryAnAjMbBfJbBbGrDvGfEvGbGbGfTrNjRrNrIjHbGjHzErIzEbLvBfJnAjHzErb@bB~\\z@~u@Sv`@S~WkCzuA{@zYSzJcGvnCwBv~@gOrfHwB~iAcBzw@{EvkBsDneB{@~W_DnoB{@zc@?~H{EntB{J~zEoAvo@RzT?~MRbG?zEnAjRnAvQbBfTbBvLnA~Hf@rDzEjWrIz^rIrXz@jCvLrXvLvVbLjRjMvQ~RvVjRbQ~MnKbGfE~HnFjM~HrNvGnFbBnPbGj\\rIfTrD~\\jCbe@z@vt@?bo@S~~CoAjR?jdAS~gBSvaG{@znBg@~f@?z^nAjRvBzObBfO~CrNrDfYrIvQ~HnP~HbQzJjMrIrNbLbLzJjMvLrNbQ~MvQj\\be@nUr]vwAntB~\\rg@fOrSvVj\\nP~RbV~W~\\r]vrAvmA~dAr`AbcAv~@bo@rl@bQfOzm@fm@bVfYrNbQfm@bt@jp@jz@~z@bcAvbDz~Dr{@~dArq@zw@bcAbmAvrAj}Aja@be@vVv[~a@jf@zzA~gBj}AnjB~\\v`@ffAfpAb[z^nPvQbQzOzJfJjMzJrNzJ~RjMvV~MrXvLfYzJbVvGrSzEbVfEbQvBfTvBrNf@nPf@nPRjaEg@f^g@bVvBzTbB~WnArl@~CvGz@vBz@vBjCbBrDbBbGR~H~Mf@bj@{@jp@?rNS?vL?rXvBnP?rNRngA?r]?nvA?bG{@r]{@b`@?fTSb~@?~k@RnPz@r]bBbj@?fTz@bpBz@bkBnAvkB?v`@f@reAvhAoAnbASbfBoAzr@g@vmAg@bhAg@~C?zYSr~A{@jM?zYSr{@Sj\\SvuBoAzOf@zOz@fm@f@j_A?vQRzJRjMvBrN~CnU~HbG~CzEbBjM~HfYfTzTbQnn@nd@bLrIrSjMrSnKnU~HbVzEbVbBvVzE~CnA~CjCbBjCbBrD~C~MR~R?jRRjz@R~Rf@~R~Cbe@bBfTjCjf@z@z^z@v`@Rfh@f@bj@jCbaBz@v`@bBzc@RnPRfJRvLnA~MbBfOfEnUjH~a@jHzc@rDjRjHr]fEvQzJbe@f@bBnAvGzJn_@f@~CrDbGvBbBjCRvBg@jH{EnAcBRkCz@gJ_Nka@_DgJ_DwLoFsScLoi@oFsb@sD{^_D_XwB{TcGwj@sD_b@kCce@wBwe@oAc[{@{dBv`@?r]?rI?rIRbfBgEjHSfc@{@~nA{@bhAg@rg@g@oAwzBnAvzBsg@f@chAf@_oAz@gc@z@kHRcfBfEsISsI?s]?w`@?S_g@S_l@?gYbBcj@RoKz@{T?kCRoU?oZcBwo@SwLg@we@g@sg@{@s`Ag@oi@Swj@kCc`@ScBcB_b@_I_tA_Dsq@kC_]oAogASc`@{@{zAsDcnCg@cy@{J_nIwB_bE?kM{@gm@jC_g@nAsNbBgOvBwLz@sDfE{OvGoUzw@sfCvBcGbB{EfEcGbGsI~H_IzJoF~M{EbLoAzYkCrNg@bt@g@zw@oAzmO?vcASbpBg@bo@g@zr@cBjWoA~WwBbQcBbL{@ni@{Erb@{EbVkCv[gEnbAoPnU{Evo@_NbcAwVb[sI~u@gTvL{EzYoKfYoK~RsIf^gOnd@_SvhA{h@~\\sNzOoFzw@wVvrAc[rjA_XreAkWnoBce@rXwGnPsD~HkCbBg@rI_DjH_D~MwGvQcL~RsNbLgJbQ{O~HsIjHgJbGsIvLsSvLcVvQka@nbAwuBbQc`@vo@_yArIgT~HgTnKk\\rIc[fJ{^rDsSzE_XfEcVrD_XzEo_@~C_]~Cg^rDoqAbBgzArIszHjCg^rDsl@bGwe@zJgm@zJ_l@~CkR?{EzaAS~RkC~H?bB?nA?jbB{@nbASj_A?zE?rwBg@nn@?vmF{@roAg@b|A?~H?zuASSwmA?{pA?cj@?sl@RolASk{B?cB?obAnFf@nAz@nArD?fE'
    );
    console.log("**** " + points.length);

    var pointsFixed = [];

    for (var i = 0; i < points.length; i++) {

      var x = {
        "lat": Number((points[i].toJSON().lat / 10).toFixed(5)),
        "lng": Number((points[i].toJSON().lng / 10).toFixed(5))
      }

      pointsFixed[i] = x;
    }

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: pointsFixed[Math.floor(pointsFixed.length / 2)]
    });

    var poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1,
      strokeWeight: 3,
      map: map,
      path: pointsFixed
    });

var markers = [ {"lat": 37.789435, "lng": -97.342812, "name":"BN51"},
  {"lat": 37.6648693, "lng": -97.4327273, "name":"7308200"},
 {"lat": 37.611052,  "lng": -97.3624598, "name":"7308201"}];

  var iconUrl = "https://maps.google.com/mapfiles/ms/icons/";
  var url;

  for (var i=0; i<markers.length ; i++)
  {

   url = iconUrl + "green-dot.png";
   if (i == 0)
     url = iconUrl + "blue-dot.png";

   if (i == markers.length-1 )
     url = iconUrl + "red-dot.png";


  new google.maps.Marker({

    position: markers[i],
    map: map,
    title: markers[i].name,
    icon: {
      url:  url
    }
  });
  }


  };