谷歌地圖V3 - 遺漏的類型錯誤：無法讀取的不確定

Question

財產「標記」我有我的地圖div容器總是在頁面上：

<div id="map_canvas"></div> 

起初我是想在AJAX來把這段DOM回調，但有麻煩，所以決定現在靜態。

我試圖從一個jQuery Ajax回調

... 
complete: function(data) { 
    // build the map 
    $.getScript("http://maps.google.com/maps/api/js?v=3&libraries=geometry&sensor=false&region=uk&async=2&callback=MapApiLoaded", function() {});  
    running = false; 

    if(running) return false; 
    running = true; 
    setMarkers(); 
    flightPath.setMap(null); // Remove polyline 
    flightPathProgress.setMap(null); // Remove polyline 

    setTimeout(function() { 
     flightPath.setMap(map); 
     flightPathProgress.setMap(map); 
     flightPathProgress.setOptions({ 
      strokeOpacity: 0 
    }); 

    var progress = 0; 
    var intvl = setInterval(function(){ 
     progress += 0.01; 
     if(progress > 1) { 
      clearInterval(intvl); 
      running = false; 
     } else { 

     } 

     // Calc progress 
     var progressLatLng = google.maps.geometry.spherical.interpolate(userlatlng, serverlatlng, progress); 
     // Update polyline 
     flightPathProgress.setOptions({ 
      strokeOpacity: progress, 
      path: [userlatlng, progressLatLng] 
     }); 
    }, 50); 
    }, 1000); 
} 

我也有以下的文件準備好功能

var map; 
var serverlatlng; 
var userlatlng; 
var servermarker; 
var usermarker; 
var flightPath; 
var flightPathProgress; 
var running; 

function MapApiLoaded() { 
    serverlatlng = new google.maps.LatLng(34.0625, -118.123); 
    userlatlng = new google.maps.LatLng(54.167, -4.48211); 
    var centerlatlng = new google.maps.LatLng(44.0835, -61.241055); 

    // Create the map 
    var myOptions = { 
     center: centerlatlng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     panControl: false, 
     zoomControl: false, 
     streetViewControl: false, 
     mapTypeControl: false 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Centre map on user and server locations 
    var bounds = new google.maps.LatLngBounds(); 
    bounds.extend(serverlatlng); 
    bounds.extend(userlatlng); 
    map.fitBounds(bounds); 

    // The grey outline path 
    flightPath = new google.maps.Polyline({ 
     path: [userlatlng,serverlatlng], 
     strokeColor: "#666", 
     strokeOpacity: 0.5, 
     strokeWeight: 4, 
     geodesic: true, 
     zIndex: 1 
     }); 

     // The red progress path 
     flightPathProgress = new google.maps.Polyline({ 
      path: [userlatlng,userlatlng], 
      strokeColor: "#ff0000", 
      strokeOpacity: 0, 
      strokeWeight: 4, 
      geodesic: true, 
      zIndex: 2 
     }); 
} 

function setMarkers() { 
    if(servermarker != undefined) servermarker.setMap(null); // Remove marker if exists 
    servermarker = new google.maps.Marker({ 
    position: serverlatlng, 
    map: map, 
    title:"Server", 
    animation: google.maps.Animation.DROP, 
    icon: 'images/marker.png' 
}); 

    if(usermarker != undefined) usermarker.setMap(null); // Remove marker if exists 
    usermarker = new google.maps.Marker({ 
     position: userlatlng, 
     map: map, 
     title:"User", 
     animation: google.maps.Animation.DROP, 
     icon: 'images/marker.png' 
    }); 
} 

我得到錯誤信息是Uncaught TypeError: Cannot read property 'Marker' of undefined之外初始化地圖。

完整的擴展消息是

Uncaught TypeError: Cannot read property 'Marker' of undefined  
www.domain.co.uk/:345 
setMarkers www.domain.co.uk/:345 
$.ajax.complete www.domain.co.uk/:242 
fire jquery.js:3064 
self.fireWith jquery.js:3176 
done jquery.js:8259 

callback`

Answer 1

您試圖加載API之前，使用谷歌地圖API構造一個google.maps.Marker。

更新： setMarkers函數在加載API之前運行。

Answer 2

顯然這是新版Google地圖更新中的一個錯誤。它似乎隻影響擁有新版本地圖的用戶。對他們來說，標記不會出現，甚至在谷歌API代碼示例：https://developers.google.com/maps/documentation/javascript/examples/marker-simple

開發者控制檯將有遺漏的類型錯誤：錯誤類型

，如果你退出谷歌和訪問同一頁面，你是最有可能看到標記

Answer 3

我認爲你需要使用「腳本」標記加載JS谷歌地圖API，而不是使用$ .getScript。

根據jQuery API文檔（http://api.jquery.com/jQuery.getScript/），getScript使用GET HTTP請求從服務器加載JavaScript文件，然後執行它。

這可能不是加載Gmaps JS API的正確方法。請注意，GMaps API的文檔中說：「腳本標記中包含的URL是加載使用Google Maps API所需的所有符號和定義的JavaScript文件的位置。此腳本標記爲必填項。 ...爲了[異步加載JS API]，您可以注入自己的標籤來響應window.onload事件或函數調用，但是您還需要指示Maps JavaScript API引導來延遲應用程序代碼的執行，直到Maps JavaScript API代碼已完全加載，您可以使用callback參數來完成此操作，該參數將完成加載API時執行的函數作爲參數。「

你可以在這裏看到gmaps API文檔：https://developers.google.com/maps/documentation/javascript/tutorial

在我的情況，我做了以下。請注意，這個工作回調參數是必需的：

function initializeGmaps() {} 
$(document).ready(function() { 
    $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGmaps"><\/script>'); 
}); 

Answer 4

我解決了這個，因爲我缺少幾何圖形從這個網址

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places,drawing,geometry"></script> 

Answer 5

結束時，如果你沒有一個企業帳戶，則還可以給你這種錯誤，來自服務器的這種反應：

{ 
"error_message" : "You have exceeded your rate-limit for this API.", 
"results" : [], 
"status" : "OVER_QUERY_LIMIT" 
} 

這意味着，要麼你加載API的次數太多了日/過於集中或您嘗試加載很多地址。檢查服務器響應，看看你是否得到它。

這個特殊的響應也會導致這個錯誤。

Uncaught TypeError: Cannot read property 'geometry' of undefined 

在這裏您可以找到一些可能有所幫助的提示。 https://developers.google.com/maps/documentation/business/articles/usage_limits