Google Maps自定义标记初始化报错：Cannot set properties of undefined

核心错误原因 #

报错Cannot set properties of undefined出现在(markers[markerItem.id] = marker)这一行，本质是**markers变量从未被声明和初始化**。旧项目中这段代码能运行，大概率是因为markers在函数外部（全局作用域）已经被定义过，但当前代码里完全没有创建这个变量的逻辑，导致执行时markers是undefined，无法给它的属性赋值。

修复步骤 #

1. 初始化markers变量 #

在initMap函数开头，添加markers的声明和初始化：

• 如果markerItem.id是数字，想用数组存储标记：

var markers = [];

• 如果markerItem.id是字符串/非数字，想用键值对存储：

var markers = {};

注意：如果用对象存储，后面的markers.forEach需要改成遍历对象的值，避免报错：

Object.values(markers).forEach(function (item) {
    item.infoWindow && item.infoWindow.close();
})

2. 修复未声明的全局变量 #

代码里的icon、image_icon没有用var/let声明，会自动挂载到全局作用域引发冲突，需要添加声明：

var icon = { url: markerItem.icon }; 
var image_icon = new Image();

3. 优化代码可读性（可选但推荐） #

原代码大量用逗号运算符代替分号，逻辑嵌套混乱，建议拆分语句，比如把标记创建、事件监听等逻辑拆成单独行，方便后续维护。

修复后的关键代码片段示例 #

function initMap() {
    var marker = null;
    var map_markers = map_settings.marker;
    var markers = []; // 新增：初始化markers数组
    var bounds; // 提前声明bounds，避免块级作用域问题
    if(map_markers.length > 0) bounds = new google.maps.LatLngBounds();
    
    var mylat = map_settings.start_lat;
    var mylong = map_settings.start_lng;
    var mapOptions = { 
        center: new google.maps.LatLng(mylat, mylong), 
        zoom: 6, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    if(map_markers.length > 0) {
        map_markers.forEach(function(markerItem) {
            var marker_icon = "";        
            var marker = "";
            var icon, image_icon; // 声明变量
            markerItem.icon && (marker_icon = markerItem.icon);
            
            marker = new google.maps.Marker({ 
                position: new google.maps.LatLng(markerItem.lat, markerItem.lng), 
                map: map, 
                title: markerItem.title, 
                infoWindow: void 0 
            });
            icon = { url: markerItem.icon }; 
            image_icon = new Image();
            
            console.log('marker '+ marker );
            
            image_icon.src = markerItem.icon;
            image_icon.onload = function () {
                marker.setIcon(icon);
            };
            image_icon.onerror = function () {
                marker.setIcon(null);
            };
            
            marker.infoWindow = new google.maps.InfoWindow({ 
                content: markerItem.info, 
                maxWidth: 200 
            });
            
            google.maps.event.addListener(marker, "click", function () {
                Object.values(markers).forEach(function (item) {
                    item.infoWindow && item.infoWindow.close();
                });
                this.infoWindow && this.infoWindow.open(map, this);
            });
            
            markers[markerItem.id] = marker; // 现在markers已定义，不会报错
            bounds.extend(marker.position);
            
            if(bounds.getNorthEast().equals(bounds.getSouthWest())) {
                var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
                var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
                bounds.extend(extendPoint1);
                bounds.extend(extendPoint2);
            }
        });
        map.fitBounds(bounds);
    }
}

内容的提问来源于stack exchange，提问作者le.fouk