Oracle Visual Builder Cloud Service(VBCS)でGoogle Map APIを利用する

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

[VBCSとは](https://www.oracle.com/jp/application-development/visual-builder/)

# 前提条件

- Google Map APIの登録が完了していること
以下などを参考に登録してAPI Keyを取得しておく
https://www.zenrin-datacom.net/business/media/g001/

- Oracle Cloudのアカウントを取得済みであること

- VBCSのプロビジョニング([Oracle Integration Cloud Serviceでも可](https://oracle-japan.github.io/ocitutorials/integration/integration-for-commons-1-instance/))が完了し、コンソールにアクセスできること

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

適当なVBCSアプリケーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/6b3e24c0-ec12-f358-e62e-7cc16bb0b873.png)

適当なWebアプリケーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/026ac73c-59bd-8851-a089-db01393e4115.png)


# メインページの編集
(見栄えのため)main-start(メインページ)にヘッダを設定します。
Heading要素をドラッグアンドドロップで追加し、任意の値に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/67babb69-7411-f1b8-f76a-ae626da68619.png)

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

```html: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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/b4026fc6-3219-0627-9973-1da0ae6d453d.png)

# Google Map読み込み処理の設定

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

```js:js
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
    }
  });
  }


  };
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/f8d6bbe4-bfa4-e9d4-14ee-2595eb3ebd46.png)

次に先ほど記述したコードをアプリケーションのライフサイクル・イベントに登録します。

Event Listenersタブを開き、「＋Event Listener」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/de5480ea-a636-13b4-08ff-cfb1619e86a4.png)

「vbEnter」を選択し、「Next」を押下します。

:::note
vbEnterのイベントが呼ばれるタイミングについては<a href="https://docs.oracle.com/cd/E83857_01/paas/integration-cloud/visual-developer/work-actions-and-action-chains.html#GUID-69C60635-B452-44B0-BC7C-ABA147B63314">こちらのドキュメント</a>をご確認ください。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/5ffe535e-7382-6791-54a0-cf3915d564e5.png)

New Page Action Chainの「＋」を押下し、インプット・テキストに任意の名前を入力し、「Finish」を押下します。

:::note
Page, Flow, Applicationについては<a href="https://docs.oracle.com/cd/E83857_01/paas/app-builder-cloud/visual-builder-developer/develop-applications.html#GUID-8F6AC32B-7696-4765-8FEE-9E3C45AC4C03">こちらのドキュメント</a>をご確認ください。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/7d0d22da-68c7-5397-efc6-b5e48926783b.png)

次に作成したAction Chainに処理を追加します。
「Go to Action Chain」のリンクを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/b6a55c88-eb79-948e-ab69-916861f8e497.png)

「Call Function」のアクションをパレットにドラッグアンドドロップで設定し、右側に表示されたPropertiesのFunction Nameに「Load」を選択します。(この「Load」は前の手順で追加したJavascriptの関数名です。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/4860b2a2-60d7-766d-2c98-4d8d5de65762.png)

"Sorce View"のindex.htmlを開き、以下のhtmlを追加します。
＜YOUR API KEY＞の部分はご自身のGoogleMap API KEYを入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/40d42060-80f7-6272-14d6-08341906e5c2.png)

設定は以上で終了です、プレビュー画面(もしくはデザイン画面)で実際の動作を確認してみましょう。
Google Mapが画面上に表示されることが確認できます。

- デザイン画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/05770698-6544-4f54-c103-8df4d838203d.png)

- プレビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479589/c32337f8-6498-30ae-28ff-a0c8c6d1eef4.png)


以上です。

# 参考
https://community.oracle.com/customerconnect/discussion/564569/example-of-integrating-google-maps-in-vbcs