如何在Google Map API中实现官方同款地图标记图标？

需求说明 #

• 使用Google Maps JavaScript API绘制静态地点数组中的所有位置
• 标记点样式与Google Maps官方默认样式保持一致

修正后的完整代码 #

// 初始化地图容器与配置
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: { lat: 8.3450235, lng: 124.430038 }
});

// 静态地点数据数组
let places = [
    {
        displayName: 'Bukidnon Province Welcome Marker',
        lat: 8.395121,
        lng: 124.7823285
    },
    {
        displayName: 'Ogaong View Deck',
        lat: 8.395121,
        lng: 124.7823285
    }
];

// 遍历数组生成官方样式标记点
places.forEach((place) => {
    new google.maps.Marker({
        position: { lat: place.lat, lng: place.lng },
        map: map,
        title: place.displayName
        // 不指定icon参数，自动使用Google Maps官方默认标记样式
    });
});

关键说明 #

• 官方样式实现：无需额外配置icon属性，Google Maps Marker默认会加载官方红色水滴标记，与你提供的示例图样式完全一致。
• 代码修正细节：
  • 修复了地图初始化时center参数的语法错误
  • 统一地点数组经纬度字段名为lng（避免long与lng混用导致的定位失效）
  • 将标记点悬停提示title替换为地点名称，优化交互体验

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