Desenvolvimento - Delphi
Traçando Mapas ponto a ponto utilização API do Google Maps
Demonstração de como utilizar a API do Google Maps, nas aplicações desenvolvidas em Delphi 7.
por Marcos Venicios GanzComo 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 http://code.google.com/apis/maps/signup.html, 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 http://code.google.com/apis/maps/signup.html }
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("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">");
slXSL.Add("<html xmlns="http://www.w3.org/1999/xhtml">");
slXSL.Add("<head>");
slXSL.Add("<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />");
slXSL.Add("<title>Marcos Ganz - Traçar rota</title>");
slXSL.Add("<script src="http://maps.google.com/maps?file=api&v=2&key=" + QuotedStr(Key) + ""type="text/javascript"></script>");
slXSL.Add("<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>");
slXSL.Add("<script type="text/javascript">");
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("</script>");
slXSL.Add("<style type="text/css">");
slXSL.Add(" * {");
slXSL.Add(" margin:0;");
slXSL.Add(" padding:0;");
slXSL.Add(" border:0;");
slXSL.Add(" font-family:Verdana, Arial, Helvetica, sans-serif;");
slXSL.Add(" font-size:12px;");
slXSL.Add(" }");
slXSL.Add("body {");
slXSL.Add(" width:780px;");
slXSL.Add(" position:absolute;");
slXSL.Add(" left:50%;");
slXSL.Add(" margin-left:-390px;");
slXSL.Add(" margin-top:20px;");
slXSL.Add("}");
slXSL.Add("input {");
slXSL.Add(" border:1px solid #666666;");
slXSL.Add(" width:300px;");
slXSL.Add("}");
slXSL.Add("form {");
slXSL.Add(" margin-top:20px;");
slXSL.Add("}");
slXSL.Add("form fieldset {");
slXSL.Add(" padding:10px;");
slXSL.Add("}");
slXSL.Add("</style>");
slXSL.Add("</head>");
slXSL.Add("<body>");
slXSL.Add("<div id="map"></div>");
slXSL.Add("<form action="#" method="POST">");
slXSL.Add("</form> ");
slXSL.Add("<div id="route"></div>");
slXSL.Add("</body>");
slXSL.Add("</html>");
{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 http://code.google.com/apis/maps/signup.html.
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 http://marcosganz.no-ip.biz:8080/mapa/ e veja o exemplo dessa hospedagem.
