Question

在阅读一段时间之后......我想开始使用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>

非常感谢您的帮助

Answer 1

使用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>

Google未定义（api maps错误）

1 个答案: