加载带地图的HTML页面时出现Uncaught ReferenceError: google is not defined错误求助

1. 核心原因：脚本加载顺序错误 #

你当前的HTML中，自定义的maps.js脚本在Google Maps API脚本之前加载执行。浏览器按顺序解析脚本，当maps.js里的代码尝试调用google.maps.*时，Google Maps的全局google对象还未被初始化，因此抛出ReferenceError。

2. 修复步骤：调整脚本加载顺序 #

把Google Maps API脚本移到maps.js之前，确保API先完成加载，再执行你的自定义代码。同时注意替换API URL中的{}为你自己的Google Maps API密钥。

修正后的HTML脚本部分：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
<!-- 先加载Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>
<!-- 再加载自定义脚本 -->
<script src="maps.js"></script>

3. 额外问题：变量名不匹配导致点击事件失效 #

你的JavaScript代码中，定义了变量pesanStart获取按钮元素，但后续绑定事件时用了pesan.addEventListener，变量名不匹配会导致点击按钮无响应，需要修正为：

pesanStart.addEventListener("click", function (event) {
  if (start.value.trim() != "" && end.value.trim() != "") {
    event.preventDefault();
    findRoute();
  }
});

4. 可选优化：使用API回调确保初始化时机 #

为了更稳妥地避免加载时序问题，可以在Google Maps API URL中添加callback参数，指定API加载完成后执行的初始化函数，将地图初始化代码放入该函数中：

修改后的API脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places&callback=initMap"></script>

修改后的JavaScript代码：

var map;
var directionsService;
var directionsDisplay;
var harga = 1.7;
var start, searchStart, end, searchEnd, detail, pesanStart;

function initMap() {
  // 初始化地图相关对象
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -7.960996, lng: 112.618634 },
    zoom: 16
  });
  directionsDisplay.setMap(map);

  // 获取DOM元素
  start = document.getElementById('start');
  searchStart = new google.maps.places.SearchBox(start);
  end = document.getElementById('end');
  searchEnd = new google.maps.places.SearchBox(end);
  detail = document.getElementById('detail');
  pesanStart = document.getElementById('pesan-btn');

  // 绑定点击事件
  pesanStart.addEventListener("click", function (event) {
    if (start.value.trim() != "" && end.value.trim() != "") {
      event.preventDefault();
      findRoute();
    }
  });
}

function findRoute() {
  var startAddress = start.value;
  var endAddress = end.value;
  var request = {
    origin: startAddress,
    destination: endAddress,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function (result, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(result);
      document.getElementById('distance').innerHTML = result.routes[0].legs[0].distance.text;
      document.getElementById('duration').innerHTML = result.routes[0].legs[0].duration.text;
      document.getElementById('price').innerHTML = 'Rp' + result.routes[0].legs[0].distance.value * harga;
      detail.style.display = 'block';
    } else {
      detail.style.display = 'none';
      alert('Petunjuk arah gagal dimuat, masukkan alamat yang benar!');
    }
  });
}

内容的提问来源于stack exchange，提问作者Fauzi Abay