グーグルマップAPIを使って郵便番号検索したい

前提・実現したいこと

プログラミングの勉強初めて３ヶ月のものです。
通販サイトの購入者情報の入力を実装しています。郵便番号を入力してボタンをクリックすると住所が町名まで
自動で出るものを作りたいと思います。よろしくお願いします。

teratailに初めて質問しますので質問の仕方でこういう書き方をしたらいいというのもあれば教えてください。

発生している問題・エラーメッセージ

検証ツールのConsoleでのエラー
Failed to load resource: the server responded with a status of 404 (Not Found)

該当のソースコード

html
1
2<!DOCTYPE html> 　　　　//application.html.erbに記述しています
3<html>
4<head lang="ja">
5　　　　　〜（省略）〜
6　　 <script type="text/javascript" src="https://js.pay.jp/v1/"></script>  <%#購入機能 %>
7    <%= stylesheet_link_tag 'application', media: 'all'%>
8    <%= javascript_pack_tag 'application' %>
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11    <script src="postal_code.js"></script>
12  </head>

HTML
1<div class="form-group">
2        <div class='form-text-wrap'>
3          <label class="form-text">郵便番号</label>
4          <span class="indispensable-2">必須</span>
5        </div>
6        
7        <div class='tooltiper nameCheck'>
8            <span class="tooltipMsg3">ハイフンを除いて入力してください<br>入力しましたら横の「検索」ボタンを押してください<br>町名まで自動で入力されます</span>
9        </div>
10        <%= f.text_field :postal_code, class:"input-default2", id:"postal-code", placeholder:"例）1234567", maxlength:"8" %>
11        <button id="kensaku" class="postal-code-btn">検索</button>
12      </div>
13      <div class="form-group">
14        <div class='form-text-wrap'>
15          <label class="form-text">都道府県</label>
16          <span class="indispensable-2">必須</span>
17        </div>
18        <%= f.text_field :area, class:"input-default2", id:"pref" ,placeholder:"例）神奈川県"%>
19      </div>
20      <div class="form-group">
21        <div class='form-text-wrap'>
22          <label class="form-text">市区町村</label>
23          <span class="indispensable-2">必須</span>
24        </div>
25        <%= f.text_field :city, class:"input-default2", id:"city", placeholder:"例）横浜市"%>
26      </div>
27      <div class="form-group">
28        <div class='form-text-wrap'>
29          <label class="form-text">番地</label>
30          <span class="indispensable-2">必須</span>
31        </div>
32　　　<%= f.text_field :address, class:"input-default2", id:"addresses", placeholder:"例）町名以下を入力してください"%>
33      </div>
34      <div class="form-group">
35        <div class='form-text-wrap'>
36          <label class="form-text">建物名</label>
37          <span class="form-any">任意</span>
38        </div>

javascript
1//apllication.jsに記述
2require("../postal_code")
3require("../card")

javascript
1window.onload = function(){
2  $('#kensaku').on('click', () => {      //$(#btn)でHTMLの検索ボタンのidの#btnを取得できる。「クリックされたら{}内の処理をする」という動きになる。
3    $.ajax({
4      url: "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + $('#postal-code').val(),  //リクエスト先のURLの末尾に、HTMLで入力された郵便番号を加える。postcodeは郵便番号のid
5      dataType: 'jsonp',                                                               //なお$('#postcode').val()で郵便番号を取得している。 dataTypeにはレスポンスとして受け取るデータ形式を指定する。ここではjsonpを設定。
6    }).done((data) => {
7      if (data.results) {              //if (data.results)で「もし、dataに結果の情報(results)が入っていたら」という条件で分岐をする。
8        getData(data.results[0]);      //入力した郵便番号が存在しない場合、後に記述するエラー内容（該当データが見つかりません）がアラートで出る。
9      } else {
10        alert('該当データが見つかりません');
11      }
12    }).fail((data) => {                //}).fail((data) => {では、何らかの原因で通信が失敗したときにアラートが出るように設定している。
13      alert('通信に失敗しました');
14    });
15  });
16
17  function getData(data) {            //getDataという関数を用意して、都道府県・市区町村・住所などの情報を使ってそれぞれのプロパティに代入する。
18    $('#pref').val(data.address1);    //RubyみたいにgetDataが先に読まれるのではない
19    $('#city').val(data.address2);
20    $('#addresses').val(data.address3);
21  }
22};
23