同一页面添加两个Google Maps后标记点击显示相同位置问题排查

嘿，我帮你排查了这个双地图标记弹窗信息重复的问题啦！核心问题出在信息窗口（InfoWindow）的复用和变量作用域上，咱们一步步来解决：

问题根源分析 #

你原来的代码里只创建了一个infowindow变量，两个地图的标记都绑定了同一个信息窗口对象——这就导致最后赋值的地址内容会覆盖之前的，所以不管点击哪个标记，都会显示最后设置的那个地址。另外，两个地图的初始化逻辑没有完全独立，也容易引发变量污染的问题。

修复方案 #

咱们把每个地图的初始化逻辑完全拆分，为每个标记创建独立的信息窗口，确保内容互不干扰：

修改后的完整代码 #

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiaU3JVL6ZiGg74Z9jLynvjaWpbkjfMD4"></script>
<script>
google.maps.event.addDomListener(window, 'load', init);

function init() {
    // 第一个地图：纽约地址
    var addressNY = "<p>228 Park Ave s New York NY 10003</p>";
    var latlngNY = new google.maps.LatLng(40.7376487, -73.9886182);
    var mapOptionsNY = {
        zoom: 16,
        center: latlngNY,
        styles: [
            {"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#193341"}]},
            {"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]},
            {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#29768a"}, {"lightness": -37}]},
            {"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#406d80"}]},
            {"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}
        ]
    };
    // 创建第一个地图实例
    var mapNY = new google.maps.Map(document.getElementById('mapNY'), mapOptionsNY);
    // 创建专属标记和信息窗口
    var markerNY = new google.maps.Marker({
        position: latlngNY,
        map: mapNY,
        title: 'New York Location'
    });
    var infowindowNY = new google.maps.InfoWindow({
        content: addressNY
    });
    // 绑定标记点击事件
    google.maps.event.addListener(markerNY, 'click', function() {
        infowindowNY.open(mapNY, markerNY);
    });

    // 第二个地图：加州地址（顺便补全了你原邮编少的一位）
    var addressCA = "<p>5737 Kanan Road #330 Agoura Hills, CA 91301</p>";
    var latlngCA = new google.maps.LatLng(34.1555359, -118.7602428);
    var mapOptionsCA = {
        zoom: 16,
        center: latlngCA,
        styles: [ // 可复用相同样式，也可自定义
            {"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#193341"}]},
            {"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]},
            {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#29768a"}, {"lightness": -37}]},
            {"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#406d80"}]},
            {"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}
        ]
    };
    // 创建第二个地图实例
    var mapCA = new google.maps.Map(document.getElementById('mapCA'), mapOptionsCA);
    // 创建专属标记和信息窗口
    var markerCA = new google.maps.Marker({
        position: latlngCA,
        map: mapCA,
        title: 'Agoura Hills Location'
    });
    var infowindowCA = new google.maps.InfoWindow({
        content: addressCA
    });
    // 绑定标记点击事件
    google.maps.event.addListener(markerCA, 'click', function() {
        infowindowCA.open(mapCA, markerCA);
    });
}
</script>

<!-- 页面中需要两个独立的地图容器 -->
<div id="mapNY" style="width: 400px; height: 300px;"></div>
<div id="mapCA" style="width: 400px; height: 300px; margin-top: 20px;"></div>

关键修改点 #

• 为每个地图创建了独立的变量（比如mapNY/mapCA、markerNY/markerCA、infowindowNY/infowindowCA），彻底避免变量冲突。
• 每个标记绑定了专属的InfoWindow，点击时只会打开对应地址的弹窗。
• 补全了你原代码中加州地址缺失的邮编位数，避免地址显示异常。

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