PHP/Javascript -在while循环中从mysql数据库显示谷歌地图上的标记 - PHP/Javascript - Displaying markers on google map from mysql database in a while loop

我有一个while循环显示数据从我的数据库，如名称地址等。我想谷歌地图循环通过从数据库的地址。目前，谷歌地图只显示一次，我不认为它循环相同的地址，是在地图旁边的列表。

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

如果我理解正确的话，您需要在页面上创建该地图的多个实例。

您必须为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>