谷歌未定义(api 映射错误）

Google is not defined (api maps error)

本文关键字：错误 映射 api 未定义 谷歌      更新时间：2023-09-26

读了一段时间...我想开始使用 Google Maps API for Javascript。我在他们的网站上得到了密钥，我尝试了很多方法来创建地图，但现在，我想通过以前的"位置"创建地图，所以首先，我使用 Geocoder.geocode（），然后我创建地图，昨晚它正在工作正常。

因此，我决定开始在这些地图中使用叠加层（标记），但我不知道我是否收到未捕获错误：未定义谷歌。

我

读了一些关于它的信息，我知道大多数时候都是关于异步问题的，但是，我仍然不知道如何解决它，这是代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script>
    <script type="text/javascript">
        var sLocation = "Castillejos 265 Barcelona";
        var sLocationToSearch =sLocation.split(' ').join('+');
        $.ajax({
            type: 'GET',
            url:  'https://maps.googleapis.com/maps/api/geocode/json?address='+ sLocationToSearch +'&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ',
            success: function(res){
                // ParseFloat the <latitud> and <longitud>
                //var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));
                initMap(res.results[0].geometry.location);
            },
            error: function(error){
                console.log(error);
            }
        });
        function initMap(oLatlng){
            var map = new google.maps.Map(document.getElementById('map'), {
              center: oLatlng,
              zoom: 15
            });
        }
    </script>
  </body>
</html>

非常感谢您的帮助

使用

window.onload 加载页面后调用 JavaScript

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map
        {
            height: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script>
<script type="text/javascript">
    window.onload = function()
    {
        var sLocation = "Castillejos 265 Barcelona";
        var sLocationToSearch = sLocation.split(' ').join('+');
        $.ajax({
            type : 'GET',
            url : 'https://maps.googleapis.com/maps/api/geocode/json?address=' + sLocationToSearch + '&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ',
            success : function(res)
            {
                // ParseFloat the <latitud> and <longitud>
                //var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));
                initMap(res.results[0].geometry.location);
            },
            error : function(error)
            {
                console.log(error);
            }
        });
        function initMap(oLatlng)
        {
            var map = new google.maps.Map(document.getElementById('map'), {
                center : oLatlng,
                zoom : 15
            });
        }
    }
</script>
</body>
</html>
相关文章：