文章/答案/技术大牛

发布

社区首页 >问答首页 >未定义的ReferenceError: google没有在api方向服务中定义

问未定义的ReferenceError: google没有在api方向服务中定义
EN

Stack Overflow用户

提问于 2022-11-30 05:29:15

回答 1查看 37关注 0票数 -2

当我试图用我的地图加载HTML页面时，我收到了这个错误：

未定义的ReferenceError: google没有定义

我以为这是我加载谷歌地图API的顺序，但我在一开始就有了。

我的HTML看起来如下：

<body>

  <section class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="row input-user text-center">
            <div class="col-md-5">
              <div class="input-lokasi">
                <input type="text" class="form-control" id="start" placeholder="Lokasi">
              </div>
            </div>
            <div class="col-md-2">
              <div class="icon-lokasi-tujuan">
                <i class="bi bi-caret-right-fill fs-2"></i>
              </div>
            </div>
            <div class="col-md-5">
              <div class="input-tujuan">
                <input type="text" class="form-control" id="end" placeholder="Tujuan">
              </div>
            </div>

          <div class="row text-center">
            <div class="col-md-5">
            </div>

            <div class="col-md-2">
            </div>
            <div class="col-md-5">
            </div>
          </div>
    
        </div>
        <div class="maps-box mt-4">
          <div class="map" id="map">
          </div>
        </div>
      </div>
<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>
  <!-- <script src="http://maps.googleapis.com/maps/api/js"></script> -->
  <script src="maps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={}&libraries=places">
    </script>
</body>

我的javascript代码如下：

var map;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var harga = 1.7;

map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: -7.960996,
    lng: 112.618634
  },
  zoom: 16
});
directionsDisplay.setMap(map);

var start = document.getElementById('start');
var searchStart = new google.maps.places.SearchBox(start);
var end = document.getElementById('end');
var searchEnd = new google.maps.places.SearchBox(end);

var detail = document.getElementById('detail');

var pesanStart = document.getElementById('pesan-btn');

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);
      console.log(result);
      console.log(result.routes[0].legs[0].distance.text);
      console.log(result.routes[0].legs[0].distance.value);

      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!');
    }
  });
}

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

我希望有人能帮我，谢谢

javascript

api

google-maps

google-maps-api-3

maps

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-30 10:45:26

您正在将Google包含在依赖它的代码之后

<script src="maps.js"></script> <! -- script that depends on the Google Maps JavaScript API v3 -->
<!-- load of Google Maps JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js?key={}&libraries=places"></script>

如果反转这两行，就会得到一个不同的错误(正如@Yrll在注释中指出的那样)：Uncaught ReferenceError: pesan is not defined
如果按照注释中的指示(通过将其更改为pesanStart)修复它，我将得到第三个错误：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')，因为在发布的HTML中没有id=pesan-btn元素。

如果我修复了它，我将得到一个没有错误的地图，自动完成输入工作和方向服务工作。

概念小提琴的证明

代码片段：

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}
/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <section class="container" style="height:100%;">
      <div class="row" style="height:100%;">
        <div class="col-md-8" style="height:100%;">
          <div class="row input-user text-center">
            <div class="col-md-5">
              <div class="input-lokasi">
                <input type="text" class="form-control" id="start" placeholder="Lokasi">
              </div>
            </div>
            <div class="col-md-2">
              <div class="icon-lokasi-tujuan">
                <i class="bi bi-caret-right-fill fs-2"></i>
              </div>
            </div>
            <div class="col-md-5">
              <div class="input-tujuan">
                <input type="text" class="form-control" id="end" placeholder="Tujuan">
              </div>
            </div>

            <div class="row text-center">
              <div class="col-md-5">
              <button id="pesan-btn">
              start
              </button>
              </div>

              <div class="col-md-2">
              </div>
              <div class="col-md-5">
              </div>
            </div>

          </div>
          <div class="maps-box mt-4" style="height:70%;">
            <div class="map" id="map">
            </div>
          </div>
        </div>
      </div>
    </section>
    <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>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
    <script>
      var map;
      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();
      var harga = 1.7;

      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -7.960996,
          lng: 112.618634
        },
        zoom: 16
      });
      directionsDisplay.setMap(map);

      var start = document.getElementById('start');
      var searchStart = new google.maps.places.SearchBox(start);
      var end = document.getElementById('end');
      var searchEnd = new google.maps.places.SearchBox(end);

      var detail = document.getElementById('detail');

      var pesanStart = document.getElementById('pesan-btn');

      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);
            console.log(result);
            console.log(result.routes[0].legs[0].distance.text);
            console.log(result.routes[0].legs[0].distance.value);

            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!');
          }
        });
      }

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

    </script>
  </body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74623244

复制

相似问题

问未定义的ReferenceError: google没有在api方向服务中定义
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError: google没有在api方向服务中定义EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError: google没有在api方向服务中定义
EN