Google Map API動的情報ウィンドウを読み込む

Question

マップ上にデータベースから動的にローディングしているGoogleマップがあります。問題は、各位置に正しい表示情報を表示しないことです。すべてのマーカー上の最後の製品からの情報のみを表示します。私は何とか各マーカーを繰り返し処理する必要があります。私のコードは以下の通りです：

<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

問題はあなたのコンテンツを動的に設定していないということです。あなたが別の関数からマーカーを作成する必要がそうするために

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

「製品」はcreateMarker機能で定義されていないので、そのはまだ働いていない