Uncaught error: google is not defined for Google Map API geocoder

Question

嘿，我目前正在使用 Google API 将地图渲染到我的应用程序上；但是，我运行遇到了一个问题，我使用 Google 的地理编码库，但运行遇到了未捕获的错误：google 未定义。

我不明白这个错误，因为我用它来渲染地图本身，并且正在读取 google 对象并渲染地图。

这是我的 html 脚本：

   <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script type="text/javascript" src="js/scripts.js" async></script>
   <script 
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap" async defer>
    </script>

这是我的 javascript 文件：

function initMap() {
var geocoder = new google.maps.Geocoder(),
fromLatLng = getLatLng(geocoder, "Pasadena, California"),
startLatLng = getLatLng(geocoder,"Los Angeles, California"),
fromLocation = new google.maps.LatLng(fromLatLng),
destLocation = new google.maps.LatLng(startLatLng),
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 32.8615616, lng: -117.2188185}, // TODO change to start location
  zoom: 7 // continet level
}),
directionService = new google.maps.DirectionsService(),
directionRender = new google.maps.DirectionsRenderer({
  map: map
}),
markerA = new google.maps.Marker({
  position: fromLocation,
  title: "Point A",
  label: "A",
  map:map
}),
markerB = new google.maps.Marker({
  position: destLocation,
  title: "Point B",
  label:"B",
  map:map
});


console.log(fromLocation)
renderRoute(directionService, directionRender, fromLocation, destLocation);

 } // end of initMap


function getLatLng(geocoder, address) {
 geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
  if(results[0].geometry.location){
    console.log("Successfully Lat/Lng converted");
    return results[0].geometry.location;
  }
  else{
    console.log("Couldn't properly convert");
  }
  } else {
  console.log('Geocode was not successful for the following reason: ' + status);
  }
  });
  }

我试过更改脚本和许多其他 Whosebug 帖子，但没有找到任何运气。

Answer 1

您的地理编码使用不正确。
我不得不承认这是一个棘手的问题！
我以前从未使用过该服务...我什至不得不启用它！！

我发现 检索信息有延迟。
是啊...毕竟是get请求...
而且你做了两次。

所以我所做的是设置一个时间间隔来检查是否在设置地图之前执行了两个 Geocode resquests 回调，因为需要设置标记。

我在一个名为 doGeocode().
的新函数中实现了它这也是您在脚本调用中的映射 API 回调，而不是 initMap.

此函数在获得 2 个地理编码 latitude/longitude 后，最终调用 initMap() 来呈现您想要的结果。

我唯一找不到的是你的 renderRoute 功能...因为你的问题中没有提供。不过我想你一定能应付得来的。

所以...看看结果on my server here。

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>SO # 39909383</title>
    <link rel="icon" type="image/gif" href="https://www.bessetteweb.com/cube-fallback/images/sept.gif">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

    <!-- Google Maps CSS-->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">

    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
        cursor: pointer !important;
    }
    </style>
    </head>
  <body>
  <div id="map"></div>

  <script>
    var map;
    var fromLocation;
    var destLocation;
    var callbackCounter=0;

    function initMap() {

        console.log("Map initialisation");

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 32.8615616, lng: -117.2188185}, // TODO change to start location
            zoom: 7, // continent level
            mapTypeId: google.maps.MapTypeId.SATELLITE      // TERRAIN, HYBRYD, ROADMAP
        });

        var directionService = new google.maps.DirectionsService();
        var directionRender = new google.maps.DirectionsRenderer({
            map: map
        });

        var markerA = new google.maps.Marker({
            position: fromLocation,
            title: "Point A",
            label: "A",
            map:map
        });

        var markerB = new google.maps.Marker({
            position: destLocation,
            title: "Point B",
            label:"B",
            map:map
        });

        // renderRoute == not a function!!
        // Missing in the question...
        // Temporarly commented out.
        //
        //renderRoute(directionService, directionRender, fromLocation, destLocation);

    } // end of initMap

    function getLatLng(geocoder, address) {
        geocoder.geocode({'address': address}, function(results, status) {

            console.log("callbackCounter: "+callbackCounter);

            if (status === 'OK') {
                if(results[0].geometry.location){
                    console.log("Successfully Lat/Lng converted");

                    // Only to see clearly in console.log()
                    var latlong = JSON.stringify(results[0].geometry.location);
                    console.log( latlong );

                    latlong = JSON.parse(latlong);
                    callbackCounter++;

                    // Set from
                    if(callbackCounter==1){
                        fromLocation = latlong;
                    }

                    // Set dest
                    if(callbackCounter==2){
                        destLocation = latlong;
                    }

                    // Function end.
                    return;
                }
                else{
                    console.log("Couldn't properly convert");
                }
            } else {
                console.log('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function doGeocode(){
        var geocoder = new google.maps.Geocoder();

        getLatLng(geocoder, "Pasadena, California");
        getLatLng(geocoder,"Los Angeles, California");

        // Wait for from and dest locations found ( Geocoder get delay )
        var waitForCoords = setInterval(function(){
            console.log("--- Interval");

            if(callbackCounter==2){
                clearInterval(waitForCoords);
                console.log("--- Interval cleared");

                // Ready to initialise the map!
                initMap();
            }

        },50);
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=doGeocode"></script>

</body>
</html>

Uncaught error: google is not defined for Google Map API geocoder

Uncaught error: google is not defined for Google Map API geocoder

html

javascript

google-maps

google-maps-api-3

google-geocoder