Javascript 使用不同的标记集在一个页面上显示多个Google地图

我正在使用GoogleMapsAPI尝试在一个页面上显示两个GoogleMaps，这两个页面都有单独的标记。标记是通过Wordpress从头部的不同自定义帖子类型动态生成的

我已经设法使一张地图显示与标记显示一致，但我似乎无法使其他地图工作。我尝试过为不同的映射添加单独的变量，如下所示，但仍然没有

有人能帮忙吗

<script type="text/javascript">
                var locations = [
                    <?php  $i = 1; while ( have_posts() ) : the_post(); ?>
                        <?php $location = get_post_meta( get_the_ID(), 'rsl_latitude', true );  if($location) { ?>
                            {
                                latlng : new google.maps.LatLng(<?php echo get_post_meta( get_the_ID(), 'rsl_latitude', true ); ?>, <?php echo get_post_meta( get_the_ID(), 'rsl_longitude', true );  ?>), 
                                info : document.getElementById('item<?php echo $i; ?>')
                        },

                    <?php } else {} $i++; endwhile; ?>
                ];
            </script>

        <?php else : ?>
            <!-- No matching posts, show an error -->
            <h1>Error 404 &mdash; Page not found.</h1>
        <?php endif; ?>



    <script type="text/javascript"> 
               var inthearea = [

      <?php $inthearea = types_child_posts("in-the-area"); 


               foreach ($inthearea as $area) { ?>

               <?php  

                $location = get_field('location', $area->ID);
                $areacat = get_field('area_category', $area->ID);

               ?>

                <?php $i = 1 ?>
                    {
                        latlng : new google.maps.LatLng(<?php echo $location['lat'];?>, <?php echo $location['lng'];?>), 

                        info : document.getElementById('item<?php echo $i; ?>')
                    },

                <?php $i++; }   ?>
                {
                        latlng : new google.maps.LatLng(<?php echo get_post_meta( get_the_ID(), 'rsl_latitude', true ); ?>, <?php echo get_post_meta( get_the_ID(), 'rsl_longitude', true );  ?>), 
                        info : document.getElementById('item<?php echo $i; ?>')
                            },

    ];


              </script>  



    var infowindow = new google.maps.InfoWindow();


function initialize() {
    map = new google.maps.Map(document.getElementById('map1'), { 
        zoom: 12, 
        center: new google.maps.LatLng(38.898748, -77.037684),
         scrollwheel:  false ,
        styles: [
        {
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#245e7c"
                }
            ]
        },
        {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#f2f2f2"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 45
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#d8dbdc"
                },
                {
                    "visibility": "on"
                }
            ]
        }
    ]
    });


    var latlngbounds = new google.maps.LatLngBounds();

    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
            map: map,
            icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i].info);
            infowindow.open(map, marker);
          }
        })(marker, i));

        latlngbounds.extend(marker.position);


        //Center map and adjust Zoom based on the position of all markers.
        if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
   latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
        map.setCenter(latlngbounds.getCenter());

    }
}

map2 = new google.maps.Map(document.getElementById('map2'), { 
        zoom: 12, 
        center: new google.maps.LatLng(38.898748, -77.037684),
         scrollwheel:  false ,
        styles: [
        {
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#245e7c"
                }
            ]
        },
        {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#f2f2f2"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 45
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#d8dbdc"
                },
                {
                    "visibility": "on"
                }
            ]
        }
    ]
    });


    var latlngbounds = new google.maps.LatLngBounds();

    for (var i = 0; i < inthearea.length; i++) {  
        var marker = new google.maps.Marker({
            position: inthearea[i].latlng,
            map: map2,
            icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(inthearea[i].info);
            infowindow.open(map2, marker);
          }
        })(marker, i));

        latlngbounds.extend(marker.position);


        //Center map and adjust Zoom based on the position of all markers.
        if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
   latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
        map.setCenter(latlngbounds.getCenter());

    }



initialize();

变量位置=[
{
latlng:new google.maps.latlng（，），
信息：document.getElementById（'item'）
},
];
错误404&mdash；找不到页面。
区域变量=[
{
latlng:new google.maps.latlng（，），
信息：document.getElementById（'item'）
},
{
latlng:new google.maps.latlng（，），
信息：document.getElementById（'item'）
},
];
var infowindow=new google.maps.infowindow（）；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map1'），{
缩放：12，
中心：新google.maps.LatLng（38.898748，-77.037684），
滚轮：错误，
风格：[
{
“功能类型”：“管理”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#245e7c”
}
]
},
{
“特色类型”：“景观”，
“elementType”：“全部”，
“造型师”：[
{
“颜色”：“#f2f2”
}
]
},
{
“featureType”：“poi”，
“elementType”：“全部”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“全部”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：45
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“全部”，
“造型师”：[
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路干线”，
“elementType”：“labels.icon”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“featureType”：“transit”，
“elementType”：“全部”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“水”，
“elementType”：“全部”，
“造型师”：[
{
“颜色”：“d8dbdc”
},
{
“可见性”：“打开”
}
]
}
]
});
var latlngbounds=new google.maps.latlngbounds（）；
对于（var i=0；imap.fitBounds(latlngbounds);
    map.setCenter(latlngbounds.getCenter());

}

initialize();

  map2.fitBounds(latlngbounds);
  map2.setCenter(latlngbounds.getCenter());