Javascript 谷歌地图API加载动态信息窗口

我让谷歌地图从我的数据库在地图上动态加载位置。问题在于它没有在每个位置显示正确的显示信息。它只在所有标记上显示上一个产品的信息。我需要以某种方式遍历每个标记。我的代码如下：

<section class="content jumbotron jumbotron-full-height">
    <div class="item slide-1">
        <div id="home-map"></div>
    </div>
</section>

<script>
    var map;
    function initMap() {

        map = new google.maps.Map(document.getElementById('home-map'), {
            center: {lat: 52.1326, lng: 5.2913},
            zoom: 6,
            mapTypeId: 'roadmap',
            styles: [
                {
                    featureType: 'all',
                    stylers: [
                        { saturation: 0 }
                    ]
                },{
                    featureType: 'road.arterial',
                    elementType: 'geometry',
                    stylers: [
                        { hue: '#00ffee' },
                        { saturation: 0 }
                    ]
                },{
                    featureType: 'poi.business',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'on' }
                    ]
                }
            ]
        });

        {% for product in products %}
            var contentString = '<div class="info-window">'+
                                    '<div id="siteNotice">'+
                                    '</div>'+
                                    '<div id="window-content">'+
                                        '{% set path = product.image is not null ? product.image.path|imagine_filter(filter|default('sylius_shop_map_thumbnail')) : 'http://placehold.it/200x200' %}'+
                                        '<img src="{{ path }}" />'+
                                        '<h1>{{ product.code }}</h1>'+
                                    '</div>'+
                                    '<h2>{{ product.city }} - {{ product.country }}</h2>'+
                                    '<p><strong> Description: </strong>{{  product.shortDescription }}</p>'+
                                    '<p><strong> Price: </strong>from {{ product.price|sylius_price }} a day.</p>'+
                                    '<a class="btn btn-primary" href="{{ path("sylius_shop_product_show", {"slug": product.slug}) }}">more info</a>'+
                                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 600
            });

            var marker = new google.maps.Marker({
                position: {lat: {{ product.latitude }}, lng: {{ product.longitude }}},
                map: map,
                title: '{{ product.city }}',
                label: '{{ product.address }}'
            });
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        {% endfor %}
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1c34AXAQ5Y3yV43Alj_ieMRaDPb0qZ44&callback=initMap" async defer>
</script>

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'home-map'）{
中心：{lat:52.1326，lng:5.2913}，
缩放：6，
mapTypeId:“路线图”，
风格：[
{
featureType:“全部”，
样式：[
{饱和度：0}
]
},{
功能类型：“道路.干线”，
elementType:“几何体”，
样式：[
{色调：'#00ffee'}，
{饱和度：0}
]
},{
featureType:“poi.business”，
elementType:'标签'，
样式：[
{可见性：“关闭”}
]
},{
功能类型：“道路”，
elementType:'标签'，
样式：[
{可见性：'在'}
]
}
]
});
{products%中产品的%s}
var contentString=''+
''+
''+
''+
“{%set path=product.image不为空？product.image.path |想象|过滤器（过滤器|默认（'sylius_shop_map_缩略图'））：”http://placehold.it/200x200' %}'+
''+
“{{product.code}}”+
''+
“{product.city}}-{{product.country}”+
“说明：{{product.shortDescription}}
”+
“价格：每天从{product.Price{sylius|u Price}}开始。
”+
''+
'';
var infowindow=new google.maps.infowindow({
content:contentString，
最大宽度：600
});
var marker=new google.maps.marker({
位置：{lat:{{product.latitude}}，lng:{{{product.longitude}}，
地图：地图，
标题：{{product.city}}，
标签：“{product.address}}”
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
{%endfor%}
}

问题在于您没有动态设置其内容。为此，必须从另一个函数创建标记

  <section class="content jumbotron jumbotron-full-height">
        <div class="item slide-1">
            <div id="home-map"></div>
        </div>
    </section>

    <script>
        var map,infowindow;
        function initMap() {

            map = new google.maps.Map(document.getElementById('home-map'), {
                center: {lat: 52.1326, lng: 5.2913},
                zoom: 6,
                mapTypeId: 'roadmap',
                styles: [
                    {
                        featureType: 'all',
                        stylers: [
                            { saturation: 0 }
                        ]
                    },{
                        featureType: 'road.arterial',
                        elementType: 'geometry',
                        stylers: [
                            { hue: '#00ffee' },
                            { saturation: 0 }
                        ]
                    },{
                        featureType: 'poi.business',
                        elementType: 'labels',
                        stylers: [
                            { visibility: 'off' }
                        ]
                    },{
                        featureType: 'road',
                        elementType: 'labels',
                        stylers: [
                            { visibility: 'on' }
                        ]
                    }
                ]
            });

             infowindow = new google.maps.InfoWindow({
                    maxWidth: 600
                });

            {% for product in products %}
                createMarker(product )
            {% endfor %}
        }

       function createMarker(product){

        var contentString = '<div class="info-window">'+
                                        '<div id="siteNotice">'+
                                        '</div>'+
                                        '<div id="window-content">'+
                                            '{% set path = product.image is not null ? product.image.path|imagine_filter(filter|default('sylius_shop_map_thumbnail')) : 'http://placehold.it/200x200' %}'+
                                            '<img src="{{ path }}" />'+
                                            '<h1>{{ product.code }}</h1>'+
                                        '</div>'+
                                        '<h2>{{ product.city }} - {{ product.country }}</h2>'+
                                        '<p><strong> Description: </strong>{{  product.shortDescription }}</p>'+
                                        '<p><strong> Price: </strong>from {{ product.price|sylius_price }} a day.</p>'+
                                        '<a class="btn btn-primary" href="{{ path("sylius_shop_product_show", {"slug": product.slug}) }}">more info</a>'+
                                    '</div>';


                var marker = new google.maps.Marker({
                    position: {lat: {{ product.latitude }}, lng: {{ product.longitude }}},
                    map: map,
                    title: '{{ product.city }}',
                    label: '{{ product.address }}'
                });
                marker.addListener('click', function() {
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                });
       }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1c34AXAQ5Y3yV43Alj_ieMRaDPb0qZ44&callback=initMap" async defer>
    </script>

var映射，信息窗口；
函数initMap（）{
map=new google.maps.map（document.getElementById（'home-map'）{
中心：{lat:52.1326，lng:5.2913}，
缩放：6，
mapTypeId:“路线图”，
风格：[
{
featureType:“全部”，
样式：[
{饱和度：0}
]
},{
功能类型：“道路.干线”，
elementType:“几何体”，
样式：[
{色调：'#00ffee'}，
{饱和度：0}
]
},{
featureType:“poi.business”，
elementType:'标签'，
样式：[
{可见性：“关闭”}
]
},{
功能类型：“道路”，
elementType:'标签'，
样式：[
{可见性：'在'}
]
}
]
});
infowindow=新建google.maps.infowindow({
最大宽度：600
});
{products%中产品的%s}
createMarker（产品）
{%endfor%}
}
功能createMarker（产品）{
var contentString=''+
''+
''+
''+
“{%set path=product.image不为空？product.image.path |想象|过滤器（过滤器|默认（'sylius_shop_map_缩略图'））：”http://placehold.it/200x200' %}'+
''+
“{{product.code}}”+
''+
“{product.city}}-{{product.country}”+
“说明：{{product.shortDescription}}
”+
“价格：每天从{product.Price{sylius|u Price}}开始。
”+
''+
'';
var marker=new google.maps.marker({
位置：{lat:{{product.latitude}}，lng:{{{product.longitude}}，
地图：地图，
标题：{{product.city}}，
标签：“{product.address}}”
});
marker.addListener（'click'，function（））{
setContent（contentString）；