Printing and lots of google maps (api)

I think I’m in over my head here but I’m so close to finish so I hope you can give me a hand.

I made a web application to deal with invitations for an event. It manages the invitations and clusters people together and also arranges all the letters that needs to be sent out to each participent with event instructions.

In the best scenario I would like to have the letter also contain a google map which directs the participent to the correct address of the event (address is not fixed but changes depending on participent and time).

I create the letters with a printable web page which generates about 180 pages.
The google maps are working but the directions stop after about 15-20 pages and just show a picture of sweden.

Example codes below is simplified but generates same problem. Any hints what i could do to get all 180 maps to draw correctly?
It doesnt matter for me if it takes 1 min to load the entire page.

(I’m doing somthing wrong with fiddle so it doesnt iterate below but you get the point)

$(document).ready(function() {

  $maps = $('.googleMap');
  $maps.each(function(index, Element) {

    $infotext = $(Element).children('.infotext');
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    directionsDisplay = new google.maps.DirectionsRenderer();

    var begin = new google.maps.LatLng(60.216667, 16.333333);
    var mapOptions = {
      zoom: 6,
      center: begin 
    }

    map = new google.maps.Map(Element, mapOptions);
    directionsDisplay.setMap(map);

    var start = $infotext.children('.address_start').text() + ', ' + $infotext.children('.city_start').text() + ', ' + $infotext.children('.zip_start').text() + ', ' + $infotext.children('.country_start').text();
    var end = $infotext.children('.address_end').text() + ', ' + $infotext.children('.city_end').text() + ', ' + $infotext.children('.zip_end').text() + ', ' + $infotext.children('.country_end').text();

    var request = {
      origin: start,
      destination: end,
      optimizeWaypoints: false,
      travelMode: google.maps.TravelMode.BICYCLING
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
      }
    });
  });
});
body {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 1.62em;
}
.page {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 10mm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.pageHeader {
  margin-bottom: 150px;
}
.pageMark {
  float: right;
  font-size: 0.8em;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<body>
  <?php for($i=0;$i<20;$i++){ ?>
  <div class="page">
    <div style="width:100%;height:500px;" class="googleMap">
      <div class="infotext">
        <div class="city_start">Stockholm</div>
        <div class="country_start">Sverige</div>
        <div class="city_end">Göteborg</div>
        <div class="country_end">Sverige</div>
      </div>
    </div>
  </div>
  <br>
  <?php } ?>
</body>


Source: jquery

Leave a Reply