Google Maps v3 - 未捕获的TypeError:无法读取未定义的属性"标记"

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之前将Google Maps API构造函数用于google.maps.Marker.

更新:setMarkers函数在加载API之前运行.

Answer 2

显然,这是新版Google地图更新中的错误.它似乎只影响拥有新版本地图的用户.对于他们来说,即使在谷歌API代码示例上也不会显示标记:https://developers.google.com/maps/documentation/javascript/examples/marker-simple

开发人员控制台将具有Uncaught TypeError:Type错误

如果您退出谷歌并访问同一页面,您最有可能看到标记

Answer 3

我解决了这个问题,因为我在这个网址末尾缺少几何体

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