PhantomJS не загружает Карты Google

Моя конечная цель - открыть локальный html файл с встроенным javascript, создать карту с полигонами и сделать снимок экрана с помощью PhantomJS. Я написал простой JS файл, чтобы сделать это:

var page = require('webpage').create();
page.open('https://www.google.com/maps', function(status) {
  console.log('State: ' + status);
  if(status === 'success') {
      page.render('example.pdf', {format: 'pdf', quality: '100'});
  }
  phantom.exit();
});

Это возвращает ошибку:

ReferenceError: Can't find variable: google

Я пробовал это в локальном html файле и на других сайтах, используя карты Google, и я продолжаю получать ту же ошибку. Мне удавалось сделать скриншот других сайтов без карт Google. Поиск в Интернете не кажется, что у людей были такие проблемы, и они успешно сделали скриншоты страниц с картами google... так что мне интересно, что может быть неправильным.

Еще одно замечание: я установил PhantomJS как драгоценный камень в проект rails и запускаю файл javascript через консоль rails, используя этот камень. Я попробовал это, используя стандартную установку PhantomJS (v 2.0.0), и он все еще не работает.

Ответы

Ответ 1

Вам придется подождать элемента в DOM. например, на maps.google.com, вы можете дождаться водяного знака, который будет загружен после загрузки всех плиток.

var page = require('webpage').create();
page.open('https://www.google.com/maps', function (status) {
    console.log('State: ' + status);
    if (status === 'success') {
        waitFor(function () {
            return page.evaluate(function () {
                var document_contains_watermark =
                    document.body.contains(document.getElementById('watermark'));
                return document_contains_watermark;
            });
        }, function () {
            page.render('maps-google-com.pdf', {format: 'pdf', quality: '100'});
            phantom.exit();
        });
    }
});

function waitFor(testFn, onReady) {
    var loaded = false;
    var interval = setInterval(function () {
        loaded = testFn();
        if (loaded) {
            onReady();
            clearInterval(interval);
        }
    }, 1000);
}

Если вы хотите сделать снимок экрана на странице, которую вы разработали, используйте ту же логику, что и выше, но добавьте элемент в событие ожидания карт Google.

google.maps.event.addListenerOnce(map, 'idle', function () {
    var loadedElem = document.createElement('div');
    loadedElem.setAttribute("id", "idLoadedElem");
    document.body.appendChild(loadedElem);
});

Ответ 2

вы должны дать puppeter a go, это упростит:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.pdf'});

  await browser.close();
})();