使用javascript和引用ID在php循环中的多个谷歌地图

Question

I try to generate maps for all items in a php loop.

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:

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

The JS is in the same php file, seperated it for better understanding. Is there an option to generate the maps in the php loop? And is the number in the unique canvas id a problem? I have a working solution with a hard coded reference and it only works with a string without numbers for document.getElementById.

Answer 1

There are no issues with numbers in an ID

There is no onload-event for a div, the functions will never be called.

Possible solution:

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