[google map API]google mapを表示させたい（hamlを使っています）

状況

現在、カフェ・飲食店登録アプリを作成しています。
店舗情報の登録機能を実装し、その登録した店舗をGoogle mapを用いて、一括表示させたいと考えており、Google map APIを活用して表示させたいと思っています。

その最初にGoogle mapを表示させようと思っているのですが、分からなくなってしまい、質問させていただきました。

hamlでhtmlを記述していまして、下記のような書き方ではないのか？と思っています。

もし宜しければ、ご回答をお願い致します。

参考記事

https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037
https://www.itti.jp/web-design/how-to-display-a-map-using-google-map-api/

コード

haml
1【_map.html.haml】
2
3:javascript
4  var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
5  var Options = {
6    zoom: 15,      //地図の縮尺値
7    center: MyLatLng,    //地図の中心座標
8    mapTypeId: 'roadmap'   //地図の種類
9  };
10  var map = new google.maps.Map(document.getElementById('map'), Options);
11
12  // Geolocation APIに対応している
13  if (navigator.geolocation) {
14    alert("この端末では位置情報が取得できます");
15  // Geolocation APIに対応していない
16  } else {
17    alert("この端末では位置情報が取得できません");
18  }
19
20  // 現在地取得処理
21  function getPosition() {
22    // 現在地を取得
23    navigator.geolocation.getCurrentPosition(
24      // 取得成功した場合
25      function(position) {
26          alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
27      },
28      // 取得失敗した場合
29      function(error) {
30        switch(error.code) {
31          case 1: //PERMISSION_DENIED
32            alert("位置情報の利用が許可されていません");
33            break;
34          case 2: //POSITION_UNAVAILABLE
35            alert("現在位置が取得できませんでした");
36            break;
37          case 3: //TIMEOUT
38            alert("タイムアウトになりました");
39            break;
40          default:
41            alert("その他のエラー(エラーコード:"+error.code+")");
42            break;
43        }
44      }
45    );
46  }
47
48  %script{:async => "", :src => "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials.googlemap:APIキー}&callback=initMap"}
49:cdata