Printing and lots of google maps (api)

Question

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>

Answer 1

Google doesn't like it when you query their server too many times in a short period of time. They rate limit you to no more than 10 requests per second. Check out their usage limits

With your code, you are trying to get directions for every single map at pretty much the same time.

Try this JsFiddle that works (at least for me it does)

I would limit my queries to 1 every 1 to 5 seconds. In my example, I wait 2 seconds between requests.

Here is your updated code:

$(document).ready(function() {

    // Set the time to wait between requests
    var increment = 2000;

    // Added this line to keep track of the timeout
    var timeout = 0;

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

        // Add more timeout
        timeout += increment;

        // Set a timeout before we initialize each map
        setTimeout(function () {

            $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];
                }
            });
        }, timeout);
    });

});

Printing and lots of google maps (api)

Question

1 answers

solution1
0 ACCPTED 2015-05-26 10:58:11

Printing and lots of google maps (api)

Question

1 answers

solution1 0 ACCPTED 2015-05-26 10:58:11

solution1
0 ACCPTED 2015-05-26 10:58:11