Traçando Mapas ponto a ponto utilização API do Google Maps

Como esse é meu primeiro artigo, primeiramente gostaria de saudar todos os programadores Delphi.

Nesse Artigo vamos ver como se utiliza a API do Google para traçar mapas ponto a ponto dentro da nossa aplicação Delphi, esse exemplo já possui uma chave de acesso, mais se você for colocar em um webserver, terá que gerar uma chave pública do Google[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] , ai basta trocar a chave do exemplo por essa nova.

Criamos uma nova aplicação no Delphi
File->New->Application.

Você vai precisar colocar no formulário, 1 panel alinhado ao Top, 2 Edit’s aonde serão informados os endereços de Origem e Destino, 1 Botão para executar o evento, e um TWebBrowser.

Após ter criado o formulário e inserido os itens necessários, vamos criar o procedimento responsável por gerar os Mapas.

Para conseguirmos gerar esse mapa e visualizá-lo, vamos criar um arquivo do tipo html em Run Time, para isso vamos utilizar uma StringList que vai receber as informações.

procedure TFormMapa.MontarMapa(AOrigem, ADestino: String);
var
slXSL: TStringList;
key : String;
begin
{verifica se existe o arquivo mapa.html no diretorio, caso exista deleta o mesmo}
if FileExists(ExtractFilePath(Application.ExeName) + 'Mapa.html') then
DeleteFile(ExtractFilePath(Application.ExeName) + 'Mapa.html');

{key é a chave que você vai gerar no site do google maps [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] }
key := 'ABQIAAAALi1YYAioizP-JR6n3o7OMRQiyMoscvuT0eTAWvcsKO5wYPZiExQMPxbJlvsjqSvYBXk1Ep2PSR-xQg';

{cria a StringList, e atribui a mesma as informações para gerar o arquivo Mapa.Html}
try
slXSL := TStringList.Create;
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add(' //cria variáveis globais a serem usadas');
slXSL.Add(' var map;');
slXSL.Add(' var directionsPanel;');
slXSL.Add(' var directions;');
slXSL.Add(' var origem;');
slXSL.Add(' var destino;');
slXSL.Add(' //cria mapa quando página carregar');
slXSL.Add(' window.onload = function() {');
slXSL.Add(' //define que o mapa será desenhado dentro do elemento ''mapa''');
slXSL.Add(' map = new GMap2(document.getElementById("map"), { size: new GSize(710,480) })');
slXSL.Add(' //insere o controle que possibilita usuário aumentar/diminuir zoom');
slXSL.Add(' map.addControl(new GLargeMapControl());');
slXSL.Add(' //usando as coordenadas de latitude e longitude para São Paulo/SP');
slXSL.Add(' map.setCenter(new GLatLng(-23.547779, -46.639366), 12);');
slXSL.Add(' directionsPanel = document.getElementById("route");');
slXSL.Add(' origem = ' + QuotedStr(AOrigem)+ '; ');
slXSL.Add(' destino = ' + QuotedStr(ADestino)+ '; ');
slXSL.Add(' directions = new GDirections(map, directionsPanel);');
slXSL.Add(' //efetua a busca, quando usuário clicar no botão');
slXSL.Add(' var fromAddress = origem;');
slXSL.Add(' var toAddress = destino;');
slXSL.Add(' directions.load(fromAddress + " to " + toAddress, {"locale":"pt_BR"});');
slXSL.Add(' }');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('

');
slXSL.Add('

');
slXSL.Add('');
slXSL.Add('');
slXSL.Add('');

{salva o arquivo Mapa.html no diretorio da Aplicação.}
slXSL.SaveToFile(ExtractFilePath(Application.ExeName) + 'Mapa.html');
finally
FreeAndNil(slXSL);
end;

end;


Note que logo no inicio do procedimento existe uma variável chamada Key, ela vai receber a chave que você gerou no site [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Após o procedimento estar criado, no evento OnClick() do Botão Traçar Roteiro faça a chamado do procedimento da seguinte forma.


procedure TFormMapa.Button1Click(Sender: TObject);
begin
MontarMapa(edtOrigem.Text, edtDestino.Text);
WebBrowser1.Navigate('file://' + ExtractFilePath(Application.ExeName) + 'Mapa.html');
end;


Nesse evento você está chamando o procedimento MontarMapa passando o endereço de origem e destino, logo após isso o webBrowser receber no seu navigate o endereço do aplicativo na maquina + ‘Mapa.html’ exemplo C:\Documents and Settings\Marcos Ganz\Desktop\Mapa\Mapa.html, fazendo com que a página seja carregada no WebBrowser dentro da sua aplicação.


Feito isso o Gerador está concluído.

Você pode alterar alguns parâmetros no arquivo html gerado e hospedar o mesmo no IIS, acesso o link [url=http://marcosganz.no-ip.biz:8080/mapa/ e veja o exemplo dessa hospedagem.][/url]

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]