4

Tenho esse código abaixo:

   <iframe width='500' scrolling='no' height='200' frameborder='0' id='map' 
   marginheight='0' marginwidth='0' src='https://maps.google.com/maps?saddr=São Paulo 
   - SP, Brasil&daddr=Rio de Janeiro - RJ, Brasil&output=embed'></iframe>

Que me retorna esse mapa:

Mapa com Rota Traçada

O que eu queria é saber como transformar esse mapa em uma imagem jpg dentro do php mantendo a rota desenhada.

Por que de tudo isso?

Estou gerando um arquivo PDF pelo MPDF mas a única coisa que ela não suporta é essa tag do <iframe> para o Google Maps e preciso desse mapa dentro do PDF.

1
  • Acredito que não exista nada para PHP que suporte isto. Wkhtmltopdf acredito ser a única opção. O bom é que é extremamente rápido, embora enorme (+40MB), e utiliza uma engine real para renderizar a página. Ela não é 100% estável no que se trata a iframe, no entanto. Commented 4/04/2015 às 20:02

3 Respostas 3

5

O Google tem uma API de mapas estáticos que são servidos como imagem. É bem fácil de usar, basta construir a URL certa e colocar como src de uma imagem:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=São Paulo, SP, Brazil&zoom=12&size=400x400">

O problema é que não existem parâmetros para traçar uma rota. Para isso, você precisa usar o serviço de rotas da API do Google Maps, para obter os dados de uma linha (polyline), essa sim aceita pela API estática. Aí o código fica um pouco mais complexo, mas produz o resultado desejado:

google.maps.event.addDomListener(window, 'load', init);

function init() {
    var directions = new google.maps.DirectionsService();
    directions.route({
        origin: "São Paulo SP Brazil",
        destination: "Rio de Janeiro RJ Brazil",
        travelMode: google.maps.TravelMode.DRIVING
    }, rotaDisponivel);
}

function rotaDisponivel(dados, status) {
    var url = "http://maps.googleapis.com/maps/api/staticmap?center=Guaratinguetá%20SP%20Brasil&zoom=8&size=800x300&maptype=roadmap&sensor=false&path=color:0x0000ff|weight:5|enc:"
    if(dados.routes[0]) {
        var div = document.getElementById('mapa');
        var img = document.createElement('img');
        img.src = url + dados.routes[0].overview_polyline;
        div.appendChild(img);
    } else {
        // erro ao obter rota
    }
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<p>O mapa vai carregar abaixo, pode demorar um pouco</p>
<div id="mapa"></div>

1
  • +1 Mapas estáticos, OMG tão simples! Nunca utilizei, mas isso é passado agora ;)
    – Zuul
    Commented 9/04/2015 às 23:15
2

Como já citado, html2canvas é uma ótima biblioteca para o uso, antes de começarmos tenha em mente:

  • html2canvas não trabalha elementos DOM reais ele apenas simula eles com Canvas
  • Ele é considerado alpha ou experimental, portanto ainda tem muito a evoluir (se bem que na maioria dos testes ele se saiu muito bem)
  • Para acessar imagens de diferentes domínios será necessário o uso de proxy (feito por linguagens como php, python, java, etc).
  • Acredito que o uso de <iframe> ainda não seja suportado, portanto o melhor neste caso é usar a API do google-maps ao invés de iframes.

Usando a API do Google Maps

Um exemplo do uso do Google Maps seria:

var parametreCarteVillage = {
    zoom                        : 9,
    center                      : new google.maps.LatLng(38.959409, -87.289124),
    disableDoubleClickZoom      : false,
    draggable                   : true,
    scrollwheel                 : true,
    panControl                  : false,
    disableDefaultUI            : true,
    mapTypeControl              : true,
    keyboardShortcuts           : true,
    mapTypeId                   : google.maps.MapTypeId.ROADMAP
};
  
var map = new google.maps.Map(document.getElementById('map_canvas'), parametreCarteVillage);
  
var marker = new google.maps.Marker({
  position:new google.maps.LatLng(38.959409,-87.289124),
  map: map,
  title: 'Titulo!'
});
#map_canvas{
    height: 400px;
    width: 600px;
    border: 1px #c0c0c0 solid;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="map_canvas"></div>

Para adicionar mais opções ao mapa leia a documentação

Usando o html2canvas

Recomendo baixar a versão 0.5.0-alpha em https://github.com/niklasvh/html2canvas/releases e incluir na página que vai usar o Google Maps, deve ficar algo como:

<script src="html2canvas.js"></script>

html2canvas(document.getElementById("map_canvas"), {
    "logging": true //Habilita os logs
}).then(function(canvas) {
    var img = new Image();
    img.onload = function () {
        img.onload = null;
        document.getElementById("output").appendChild(img);
    };
    img.src = canvas.toDataURL("image/png");
});

Porém como mencionei anteriormente, para acessar imagens de diferentes domínios, no caso o seu domínio acessa as imagens do google, será necessário usar CORS, porém as imagens estão no domínio do Google e isto não temos controle, então teremos que usar proxy.

Proxy neste caso não é a tecnologia para usar um ip diferente na sua máquina, mas sim um script que roda no servidor e exibe a imagem do domínio externo como se estive-se no seu domínio, ou mesmo que sejam três domínios seu-site.com, maps.google.com e proxy.seu-site.com ele faz o uso de CORS ou do data URI scheme.

Proxy para html2canvas

Eu desenvolvi quatro proxys em linguagens diferentes:

O uso seria algo como (exemplo com aspx):

html2canvas(document.getElementById("map_canvas"), {
    "logging": true, //Habilita os logs
    "proxy":"html2canvasproxy.ashx"
}).then(function(canvas) {
    var img = new Image();
    img.onload = function () {
        img.onload = null;
        document.getElementById("output").appendChild(img);
    };
    img.src = canvas.toDataURL("image/png");
});

Lista de opções estras para usar em html2canvas(..., {opções}).then(...)

Opção Tipo padrão Descrição
allowTaint boolean false Permite causar o taint quando houver imagens cross-origin
background string #fff Troca a cor de fundo do canvas, se não espeficicado no dom use undefined para transparente
height number null Limita a altura do em pixels. Se null irá renderezar com a altura total da janela
letterRendering boolean false Usado para renderizar cada letra separadamente. É necessário se estiver usando letter-spacing
logging boolean false Quando true mostra log no console do navegador
proxy string undefined A url do proxy é usa da para carregar imagens cross-origin. Se não definido ou vazio as imagens não serão carregadas
taintTest boolean true Testa cada imagem para antes de desenhar, para verificar se irá manchar o <canvas>
timeout number 0 Tempo de espera para o carregamento das imagens em milesegundos. Se 0 não haverá esperar
width number null Limita a largura do em pixels. Se null irá renderezar com a largura total da janela
useCORS boolean false Se true tenta carregar as imagens com cross-origem, se não tenta usar o proxy

Relatado: Como usar o addHTML do jsPDF?

0

Olá. Amigo, para realizar este feito, eu faço a seguinte sugestão: Utilize a API do Google Maps e crie este mapa em uma DIV. Somente assim, você terá acesso ao evento tilesLoaded, que simboliza o total carregamento do mapa, possibilitando a você gerar um CANVAS e "imprimir" a imagem como PNG ou JPEG, possibilitando a passagem para o seu PHP. No IFRAME , as politicas de segurança do GOOGLE te impedem de acessar o conteúdo do mesmo, impossibilitando assim a manipulação do objeto, levando a soluções utilizando TIMEOUT que, em geral, são falhas.

Para a conversão do mapa para PNG ou JPEG, após a renderização tu pode usar :

http://html2canvas.hertzen.com/

Ou após renderizar o mapa, utilizar o seu próprio meio de geração de PDF, que eu assumo ter origem do HTML.(Que supondo pelo motivo acima, pode não estar sendo exibido). Espero ter ajudado. Boa sorte.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .