GoogleMapAPIを使用していましたが、反映されなくなってしまいました

google　mapのAPIを使用して二点間距離を測定するシステムが表示されなくなってしまいました。
以下に、コードを貼り付けております。

＜HTML＞

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8jmvgGUCb2Dvfl2HQTmtxaa9u03YH-gM" defer></script> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { width: 100%; height: 500px; }

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

</style> </head> <body> <div id="map"></div> <div id="result-distance"></div> <div id="result-time"></div> <div id="result-price"></div> <script src="./app.js"></script> </body>

＜JavaScript＞
'use strict'

//=============================================================================
// 設定値
//=============================================================================
// 10km毎の時間（分）
const MINUTES_PER_10KM = 5
// 最初の60分までの料金
const BASE_PRICE = 4900
// 60分経過後30分毎の料金
const PRICE_PER_30MIN = 2270

// 地図の初期ズームレベル
const INITIAL_MAP_ZOOM = 15

// マーカーAの初期緯度、経度（兼、地図の初期中央地点）
const MARKER_A_INITIAL_POSITION = {
lat: 35.688716,
lng: 139.691918
}
// マーカーAのタイトル（マウスホバーで表示されるテキスト）
const MARKER_A_TITLE = '位置A'
// マーカーAのラベル
const MARKER_A_LABEL = 'A'

// マーカーBの初期緯度、経度
const MARKER_B_INITIAL_POSITION = {
lat: 35.689160,
lng: 139.700869
}
// マーカーBのタイトル（マウスホバーで表示されるテキスト）
const MARKER_B_TITLE = '位置B'
// マーカーBのラベル
const MARKER_B_LABEL = 'B'

// 二点を結ぶラインの色
const LINE_COLOR = '#FF0000'
// 二点を結ぶラインの不透明度
const LINE_OPACITY = 0.6
// 二点を結ぶラインの太さ
const LINE_WEIGHT = 2

//=============================================================================
// 以下スクリプト本体
//=============================================================================
function write(elementId, text) {
const e = document.getElementById(elementId)
e.innerText = text
}

function showDistance(distance) {
write('result-distance', distance.toFixed(2) + 'km')
}

function showTime(time) {
write('result-time', time + '分')
}

function showPrice(price) {
write('result-price', price + '円')
}

function showResult(markerA, markerB) {
const distance = calcDistance(markerA, markerB)
const time = distanceToTime(distance)
const price = timeToPrice(time)
showDistance(distance)
showTime(time)
showPrice(price)
}

/**

Calculate haversine distance
@see https://developers-jp.googleblog.com/2019/12/how-calculate-distances-map-maps-javascript-api.html

*/
function calcDistance(mk1, mk2) {
const R = 6371.0710 // Radius of the Earth in miles
const rlat1 = mk1.position.lat() * (Math.PI / 180)
// Convert degrees to radians
const rlat2 = mk2.position.lat() * (Math.PI / 180)
// Convert degrees to radians
const difflat = rlat2 - rlat1 // Radian difference (latitudes)
const difflon = (mk2.position.lng() - mk1.position.lng())
* (Math.PI / 180) // Radian difference (longitudes)

const d = 2 * R
* Math.asin(Math.sqrt(Math.sin(difflat / 2) * Math.sin(difflat / 2)
+ Math.cos(rlat1) * Math.cos(rlat2)
* Math.sin(difflon / 2) * Math.sin(difflon / 2)))
return d
}

function distanceToTime(distance) {
return Math.ceil(distance / 10) * MINUTES_PER_10KM
}

function timeToPrice(time) {
return BASE_PRICE + Math.ceil(Math.max(time - 60, 0) / 30) * PRICE_PER_30MIN
}

function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: MARKER_A_INITIAL_POSITION,
zoom: INITIAL_MAP_ZOOM
})

const markerA = new google.maps.Marker({
position: MARKER_A_INITIAL_POSITION,
map: map,
title: MARKER_A_TITLE,
label: MARKER_A_LABEL,
draggable: true,
})

const markerB = new google.maps.Marker({
position: MARKER_B_INITIAL_POSITION,
map: map,
title: MARKER_B_TITLE,
label: MARKER_B_LABEL,
draggable: true,
})

let line

function update() {
showResult(markerA, markerB)
line = new google.maps.Polyline({
path: [markerA.getPosition(), markerB.getPosition()],
geodesic: true,
strokeColor: LINE_COLOR,
strokeOpacity: LINE_OPACITY,
strokeWeight: LINE_WEIGHT,
map: map
})
}

function reset() {
if (line) {
line.setMap(null)
}
}

markerA.addListener('dragstart', reset)
markerB.addListener('dragstart', reset)
markerA.addListener('dragend', update)
markerB.addListener('dragend', update)

update()
}