javascript - 第二次调用 initmap() 在控制台中产生 "google is not defined"错误

Question

在我的应用程序中，我从数据库中获取纬度和经度，并在 Google map 上显示标记。最初，我默认获取纬度和经度，并加载标记，这工作正常。

现在，在提交表单后，我将获取输入值并从数据库中获取数据，并使用新创建的数组作为参数调用 JS 函数并调用 initmap()。

现在，最疯狂的是我已经实现了我的目标。我的应用程序运行得很好，但在 JS 控制台中我仍然可以看到
Uncaught ReferenceError: google is not Defined

我想知道我是否调用 inimap() 错误，或者任何建议表示赞赏。

这是我的 PHP 和表单代码 -

<?PHP
    $markingsArray = array();
    //Code to fetch and assign values to array $markingsArray
?>

<form action="" method="get">
    <table style="font:normal 100% 'century gothic', arial, sans-serif">
    <tr>
    <td>Year</td><td>:</td><td><select id="insYear" name="insYear">
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
    </select> </td>
    </tr>
    <tr>
    <td>Club</td><td>:</td><td><select id="clubname" name="clubname">
      <option>BaseBall</option>
    <option>Football</option>
    <option>Others</option>
    </select> </td>
    <td><input type="submit" name="load" value="Load the club info" class="button button1"></td>
    </tr>
    </table>
</form>

<?PHP
    if(isset($_GET['load'])) {
        $clubInp = $_GET["clubname"];
        $yearInp = $_GET["insYear"];
        $clubyearRequestedData = array();
      //........
      //Here Code to fetch and fill this array $clubyearRequestedData
      //........

      echo "<script async type='text/javascript'>";
      echo"updateFilteredMarkers(".json_encode($clubyearRequestedData).");";
      echo"</script>";
?>

这是我的 Javascript 代码，它位于同一页面中..

   <script type='text/javascript'>
    var markingsLocal = <?php echo json_encode($markingsArray); ?>;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: new google.maps.LatLng(40.697465, -89.613393),
        //disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        fullscreenControl: false
    });

    callingThis();
    otherFunction1();
    otherFunction2();
    }

    function updateFilteredMarkers(clubyearRequestedData){
        markingsLocal = clubyearRequestedData;
        initMap();
    }

    function callingThis(){
        for (var i=0;i<markingsLocal.length;i++){
        //Using the array values to create markers on map.
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxMyAPIKeyxxxxxxxxxx&libraries=places&callback=initMap">
</script>

谢谢

Answer 1

当您发布表单时，页面会重新加载。在这种情况下，您在加载 API 之前调用 updateFilteredMarkers，生成您看到的消息，然后当 API 加载时，它再次运行 initMap，这次它起作用了(因为API 已加载)。您不需要在 updateFilteredMarkers 内调用 initMap，因为它将在 API 加载后运行。