如何在PHP页面中通过AJAX加载JSON数据添加Google Maps标记

问题根源 #

• 你的initialize()函数没有完成地图实例化的核心步骤：你仅定义了地图容器、配置项，但是没有执行map = new google.maps.Map(mapCanvas, mapOptions)给全局的map变量赋值，导致全局map一直处于undefined状态，地图自然无法渲染，后续添加标记时传入的map参数也是空值，标记也无法正常显示。
• 你在run()函数中重复调用initialize()没有必要，甚至会导致地图重复初始化出现异常。

修复方案 #

1. 修改initialize()函数，补全地图实例化代码：

function initialize() {
    var mapCanvas = document.getElementById('mapArea');
    var mapOptions = {
      center: latlng,
      zoom: 19,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    // 补全这行代码，给全局map变量赋值
    map = new google.maps.Map(mapCanvas, mapOptions);
}

2. 删除run()函数里的initialize()调用，页面加载时已经触发过一次初始化，不需要每次切换单选按钮都重新初始化地图。
3. 可选优化：每次清空旧标记后，同步重置markers数组，避免数组持续膨胀占用内存：

markers.forEach( function( e,i,a ){
   e.setMap( null ); 
});
markers = []; // 新增这行

内容的提问来源于stack exchange，提问作者user1801745