Google Map API加载动态信息窗口

Question

I have google maps loading locations from my database dynamically on the map. The problem is its not displaying each locations correct display information. Its only showing information from the last product on all the markers. I need to iterate through each marker somehow. My code is below:

<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>

Answer 1

The problem is you are not setting its content dynamically. To do so you have to create marker from another function

  <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>

Be sure to declare infowindow as a global variable