Google Maps API錯誤：initMap不是函數

Question

我的谷歌地圖標記出現問題。他們仍然可以工作，但我得到的，開發者控制檯輸出如下：

maps.php:43 Uncaught SyntaxError: Unexpected token , 

這是此行中我的代碼：

center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>} 

而接下來的錯誤消息：

message 
: 
"initMap is not a function" 
name 
: 
"InvalidValueError" 
stack 
: 
"Error↵ at new mc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:47:499)↵ at Object._.nc (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:48:96)↵ at $g (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:98:420)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:53↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:137:20↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:138:68 

我沒有得到我所做的錯誤，這裏是我的JS代碼：

<script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmbNphkRdEmJqjC1rQwirD6NL-24Kbdb0&callback=initMap"> 
      </script> 
      <script> 
       function initMap() { 
        var map = new google.maps.Map(document.getElementById('map'), { 
         zoom: 10, 
         center: {lat: <?php echo $e[0]; ?>, lng: <?php echo $e[1]; ?>} 
        }); 

        // Create an array of alphabetical characters used to label the markers. 

        // Add some markers to the map. 
        // Note: The code uses the JavaScript Array.prototype.map() method to 
        // create an array of markers based on a given "locations" array. 
        // The map() method here has nothing to do with the Google Maps API. 

        var infoWin = new google.maps.InfoWindow(); 

        var markers = locations.map(function (location, i) { 

         var marker = new google.maps.Marker({ 
          position: location, 
         });       

         google.maps.event.addListener(marker, 'click', function (evt) { 
          infoWin.setContent("<div style='color: black;'><p style='font-size:1.5em;'>"+ location.date +"</p><h2>" + location.headline + "</h2><h3>" + location.subheadline + "</h3><p style='font-size:1.2em;'><strong>Start:</strong> "+ location.start +" Uhr</br><strong>Ende:</strong> "+ location.end +" Uhr</p><hr><p>" + location.text + "</p><hr><p style='font-size: 1.2em;'><strong>Adresse:</strong></br>" + location.street + " " + location.streetnr + ", " + location.plz + " " + location.city + "\n\ 
             </p><a style='font-size: 1.2em;' target='blank_' href='http://www.google.com/maps/place/" + location.lat + "," + location.lng + "'>Routenführung</a></div>"); 
          infoWin.open(map, marker); 
         }) 

         return marker; 

        }); 

        console.log(markers); 

        // Add a marker clusterer to manage the markers. 
        var markerCluster = new MarkerClusterer(map, markers, 
          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
       } 
       var locations = <?php echo json_encode($r); ?> 
       console.log(locations); 

      </script> 

問題是我有56個標記，但只有27個出現。我認爲數據可能存在問題。它可以？我搜索了但沒有找到像我這樣的熟悉的問題。

Answer 1

解析時發生數據錯誤。不是Lat或Lng被設置爲某些數據...

Answer 2

您是否嘗試定義您的功能initMap之前您是否從Google Maps API執行腳本？

只需將此行移動到文件末尾即可。

<script async defer 
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmbNphkRdEmJqjC1rQwirD6NL-24Kbdb0&callback=initMap"> 
     </script> 

Answer 3

你需要先定義你的函數，就像我在下面的示例代碼中所做的那樣。

function GoogleDistanceService() { 
    var map; 
    var directionDisplay; 
    var distanceOption; 
    var directionsService = new google.maps.DirectionsService(); 

    return { 
     "initializeLoad": function (mapContext) { 
      directionDisplay = new google.maps.DirectionsRenderer(); 
      var chicago = new google.maps.LatLng(35.220033, -50.5500100); 
      var mapOptions = { 
       zoom: 6, 
       center: newyork 
      }; 
      map = new google.maps.Map(mapContext, mapOptions); 
      directionDisplay.setMap(map); 

      ////////////////// here put code to hide your map div 

     }, 
     "callBack": function (response, status) { 
      var distance = ""; 
      if (status != google.maps.DistanceMatrixStatus.OK) { 
       distanceOption.errorCallBack(null); 
      } 
      else { 
       var origins = response.originAddresses; 
       var destinations = response.destinationAddresses; 

     /////////// here show your map div 

       for (var i = 0; i < origins.length; i++) { 
        var results = response.rows[i].elements; 
        for (var j = 0; j < results.length; j++) { 
         distance = results[j].distance.text.replace(" km", "") * 0.62137; 
        } 
       } 
      } 
      distanceOption.updatedCallBack({ "start": distanceOption.start, "end": distanceOption.end, "distance": distance }); 
     }, 
     "MapLoad": function (option) { 
      distanceOption = option; 
      this.initializeLoad(option.mapContext); 
      var service = new google.maps.DistanceMatrixService(); 
      var request = { origin: option.start, destination: option.end, travelMode: google.maps.TravelMode.DRIVING }; 

      directionsService.route(request, function (response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionDisplay.setDirections(response); 
       } 
      }); 

      service.getDistanceMatrix({ 
       origins: [option.start], 
       destinations: [option.end], 
       travelMode: google.maps.TravelMode.DRIVING, 
       unitSystem: google.maps.UnitSystem.METRIC, 
       avoidHighways: false, 
       avoidTolls: false 
      }, this.callBack); 
     } 
    };  
};