带有javascript和参考ID的php循环中的多个谷歌地图

Question

我尝试为 php 循环中的所有项目生成地图。

html:

<div class="container main-content">
  <!-- echo out the system feedback (error and success messages) -->
  <?php $this->renderFeedbackMessages(); ?>

  <div class="row">
    <div class="col-md-12">
        <h2>Event Overview</h2>
        <hr>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-pull-3">
        <?php
          if ($this->events) {
            foreach($this->events as $key => $value) {
            echo 
            '
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title clearfix">
                  <b>' . htmlentities($value->event_name) . '</b> <div class="pull-right">' . htmlentities(date("d.m.y", $value->event_start_timestamp)) . ' - ' . htmlentities(date("d.m.y", $value->event_end_timestamp)) . '</div>
                  </h3>
                </div>
                <div class="panel-body">
                  <div id="map-canvas-' . htmlentities($value->event_id) . '" onload="renderMap(' . htmlentities($value->event_id) . ', ' . htmlentities($value->google_reference_id) . ')"></div>
                </div>
              </div>
            ';
            }
          }
        ?>
    </div>
  </div>
</div>
<!-- Google API Places -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

js 脚本：

<script>
  function renderMap(event_id, google_reference_id) {
    var map_settings = <?php echo json_encode($this->events); ?>;

    var request = {
      reference: google_reference_id
    };

    var map = new google.maps.Map(document.getElementById('map-canvas-'+ event_id));
    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {

        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(15);
        }

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }
    });
  }
</script>

JS在同一个php文件中，为了更好理解，将其分开。是否有在 php 循环中生成地图的选项？唯一画布ID中的数字有问题吗？我有一个带有硬编码参考的工作解决方案，它只适用于没有数字的 document.getElementById 字符串。

Answer 1

ID 中的数字没有问题

div 没有onload-event，函数永远不会被调用。

可能的解决方案：

window.onload = function(){
  var maps = document.querySelectorAll('div[id^="map-canvas-"]');
  for(var i  =0; i < maps.length; ++i ){
    maps[i].onload();
  }
}