PHP/Javascript - whileループでmysqlデータベースからgoogleマップにマーカーを表示

Question

私は名前のアドレスなどのデータベースからデータを表示するwhileループを持っています。データベース。現在、Googleマップは一度しか表示されず、マップの隣にあるリストと同じアドレスがループするとは思われません。

<script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&signed_in=true&callback=initMap"async defer></script> 

while ($row = mysql_fetch_assoc($query)) { 

echo "<div class='result-container'> 

    <div class='result-wrap'> 

     <div class='leftbox'> 

      <div class='titlebox'> 
       <h2>" . $row['company_name'] . "</h2> 
      </div> 

      <div class='box'> 
       " . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ",&nbsp" . $row['address_2']) . ((empty($row['town'])) ? '' : ",&nbsp" . $row['town']) . ((empty($row['county'])) ? '' : ",&nbsp" . $row['county']) . ((empty($row['postcode'])) ? '' : ",&nbsp" . $row['postcode']) . " 
      </div> 

      <div class='box'> 
       " . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . " 
      </div>   

     </div> 

     <div class='rightbox'> 

       <div class='service-pic'> 
       <img src='img/buddy.png' class='hvr-bob'> 
       </div>      

      <div id='map' style='width: 250px; height: 250px;'></div> 

     </div> 

     </div><br/>"; 

    } 

<script> 
    var address = "$row['address_1'], $row['town'], $row['postcode'], UK"; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeId: google.maps.MapTypeId.TERRAIN, 
      zoom: 6 
     }); 

     var geocoder = new google.maps.Geocoder(); 

     geocoder.geocode({ 
      'address': address 
      }, 
     function(results, status) { 
      if(status == google.maps.GeocoderStatus.OK) { 
       new google.maps.Marker({ 
       position: results[0].geometry.location, 
       map: map 
       }); 
       map.setCenter(results[0].geometry.location); 
      } 
     }); 
</script> 

Answer 1

私が質問を正しく理解している場合は、ページ上に複数のマップインスタンスを作成する必要があります。

initMap()のコードを生成する必要があります。スクリプトタグでコールバックとして指定したJavaScript関数です。この関数は、マップの複数のインスタンスを作成します。この目的のために、$counter変数を導入して、実際に異なるインスタンスを持つことができます。また、私はスクリプトタグからsigned_inパラメータを削除しましたが、最近は廃止されました。

コードスニペットは、以下の通りである：

<script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&callback=initMap" async defer></script> 

    <?php 
     $counter = 0; 
     $jsInitFunction = "function initMap() { var geocoder = new google.maps.Geocoder(); "; 
     while ($row = mysql_fetch_assoc($query)) { 
      echo "<div class='result-container'> 

       <div class='result-wrap'> 

        <div class='leftbox'> 

         <div class='titlebox'> 
          <h2>" . $row['company_name'] . "</h2> 
         </div> 

         <div class='box'> 
          " . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ",&nbsp" . $row['address_2']) . ((empty($row['town'])) ? '' : ",&nbsp" . $row['town']) . ((empty($row['county'])) ? '' : ",&nbsp" . $row['county']) . ((empty($row['postcode'])) ? '' : ",&nbsp" . $row['postcode']) . " 
         </div> 

         <div class='box'> 
          " . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . " 
         </div> 

        </div> 

        <div class='rightbox'> 

          <div class='service-pic'> 
          <img src='img/buddy.png' class='hvr-bob'> 
          </div> 

         <div id='map" . $counter . "' style='width: 250px; height: 250px;'></div> 

        </div> 

        </div><br/>"; 

       $jsInitFunction .= "var address" . $counter . " = '" . $row['address_1'] . "," . $row['town'] . "," . $row['postcode'] .", UK'; 

           var map" . $counter . " = new google.maps.Map(document.getElementById('map" . $counter . "'), { 
             mapTypeId: google.maps.MapTypeId.TERRAIN, 
             zoom: 6 
           }); 

           geocoder.geocode({ 
            'address': address" . $counter . " 
           }, function(results, status) { 
             if(status == google.maps.GeocoderStatus.OK) { 
              new google.maps.Marker({ 
               position: results[0].geometry.location, 
               map: map" . $counter . " 
              }); 
              map" . $counter . ".setCenter(results[0].geometry.location); 
            } 
           });"; 

       $counter++; 
      } 
      $jsInitFunction .= "}"; 
    ?> 

    <script> 
     <?php print $jsInitFunction; ?> 
    </script>