Usando Google Maps no Delphi

cobbra · Julho 28, 2009

Olá, gostaria de deixar uma informação preciosa aqui, para quem precisa criar aplicações em Delphi que usem Google Maps.

Os usos são diversos. De software para barcos até controle de localização de objetos.

Antes de sair copiando e colando, gostaria somente que você respeitasse os créditos, tanto de onde você achou essa informação, quanto também de quem você puxou isso.

Se de acordo, aproveite o conteúdo abaixo.

Abaixo, está o conteúdo do HTML com os JavaScripts para que sejam acionados posteriormente no Delphi.

Está tudo muito mastigado, e todos os comandos comentados. Sendo assim, no exemplo em Delphi, vou somente explicar como chamar a função JavaScript.

Recomendo Primeiro, que você gere um Key no Google Maps, só assim ele vai funcionar corretamente.

Salve o código abaixo, como um arquivo chamado Mapa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Adicione sua Google API Key onde está ALTERESEUKEY-->
<!-- Fiz a alteração da versão do Google Maps de V=2 para V=2.151 para acionamento do DOM no Tabbed Max -->
&lt;script src="http://maps.google.com/maps?file=api&v=2.151&key=ALTERESUAKEY" type="text/javascript"></script>
<!-- 
    // Direitos Autorais: Adriano H. Hedler - adriano(at)hhedler.com
    // 
    // Todas as informações contidas neste script, 
        // caso sejam aproveitadas ou usadas, devem citar a fonte, e incluir este cabeçalho.
    // GPL - Free License - Uso não comercial
    // Data de Programação: Julho - 2009
        // Dados de Script:
        // Script em Java Script para Interação com programação Delphi e Mysql e/ou XML conforme necessidade. - Revisão 1.8
    // Ferramentas Auxiliares: Google Maps / Google Earth 3D
        // Obs. *Este script só é ativo em seus recursos se conectado na internet.
        // O Script é Comentado, caso deseja alterar ou adaptá-lo.
        // Alterações: Versão do Google Maps no Key foi alterada para Acesso a Recursos DOM do JavaScript, sendo assim a versão utilizada é: V=2.151
        //
-->
<style type="text/css">
<!--

<!-- // Formatação do Texto e Conteúdo geral das DIVs -->
html, body { 
width: 100%; 
height: 100%;
margin : 0px;
overflow-y: hidden; overflow-x: hidden;
}

#map {
width: 100%; 
height: 100%;
}

.texto_simples
{
font-family:Arial, Helvetica, sans-serif; 
font:"Arial";
font-weight: bold;
font-size:11px;
}

<!-- // Formatação da Janela mostrada quando o Zoom é Selecionado dentro do Google Maps - Recurso DragZoom -->
#zoominout 
{
font-family:Arial, Helvetica, sans-serif; 
font:"Arial";
padding:10px;
font-size:10px;
border:solid 1px;
border-color:#000000;
}
 -->
</style>
</head>
<!--     // Formatação Necessária para tomar toda a tela do navegador -->
<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<!-- DIV map que contém o mapa que será criado e seus atributos -->
<div id="map" style="height: 100%; width: 100%;"></div>
<!-- Scripts para recursos da Criação de Popup´s Dinâmicos e função de DragZoom, recurso auxiliar -->
<!-- &lt;script src="tabbedmaxcontent_packed.js" type="text/javascript"></script> -->
&lt;script src="tabbedmaxcontent.js" type="text/javascript"></script>
&lt;script src="dragzoom.js" type="text/javascript"></script>
&lt;script src="MStatusControl.js" type="text/javascript"></script>
&lt;script type="text/javascript">
    

    //  Início de Script 
    // Criação do MAPA e Centralização com Zoom específico. Aqui centralizado no Brasil.
    var map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair', draggingCursor: 'all-scroll'});
    map.setCenter(new GLatLng(-15.792254,-56.250000), 4);
        
    // Ativa movimento pelo Rollow do Mouse - Recurso Ativado, mas pode ser desativado dentro do Programa.
    map.enableScrollWheelZoom();
    
    // Adiciona o Mapa de Terreno Físico e cria a hierarquia de controle.
    map.addMapType(G_PHYSICAL_MAP);
    var ctrl2 = new GHierarchicalMapTypeControl();
    
    // Marker Manager
    var mm = new GMarkerManager(map);
    
    // Google Earth: desabilitado por falta de API para Desktop - Habilite caso queira ver o mapa em 3D. Basta retirar a //
    // map.addMapType(G_SATELLITE_3D_MAP);
    // Este recurso não permite a captura de tela e outras funções. Somente Criação de Ponto.
    
    // Marca como default o modelo Hybrido de Mapa
    ctrl2.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, null, true);
    
    // Adiciona o controle extendido do mapa através da variável.
    ctrl1 = new GLargeMapControl();

    // Opção de Drag com ícones {+} e {-} - recursos adicionais
    ctrl3 = new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(47,10));
    var otherOpts = { 
          buttonStartingStyle: {background: '#FFF', paddingTop: '0px', paddingLeft: '0px', border:'none'},
          buttonHTML: '<img title="Zoom In" src="imagens/zoom.png">',
          buttonStyle: {width:'17px', height:'17px'},
          buttonZoomingHTML: '<div id="zoominout"><blink>Clique e arraste sobre uma área do MAPA<br>(ou clique aqui<br>para resetar)</blick></div>',
          buttonZoomingStyle: {background:'#BFDBFF', width:'100px', height:'100%', color:'#15428B'},
          backButtonHTML: '<img title="Zoom out" src="imagens/zoomout.png">',  
          backButtonStyle: {display:'none',marginTop:'4px',width:'17px', height:'17px'},
          backButtonEnabled: true, 
          overlayRemoveTime: 1500}
          ctrl3 = new DragZoomControl({}, otherOpts, {}), GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(47,100)); 

     
    // Adiciona Escala para Medição e Referência
    ctrl4 = new GScaleControl();
    
    // Ativa GPS para inicialização
    ctrl5 = new MStatusControl({DMS:false, background:'#BFDBFF', foreground:'#15428B'}); 
    
    // Ativa os controles

    // Ativa Controle de Zoom e Slider
    map.addControl(ctrl1);
    // Ativa Controle de Tipo de Mapa
    map.addControl(ctrl2);    
    // Controle de Zoom out e In
    map.addControl(ctrl3);
    // Ativa Escala
    map.addControl(ctrl4);
    // Ativa Controle GPS
    map.addControl(ctrl5);    
    
            
    // Criação de Marcas conforme quantidade de Abas estabelecidas: (4) 
    // Cria a marca com as informações a seguir
    
    function createMapMarker (lat, lng, texto1, texto2, tab1, tab2) {

    
    // Segunda Parte
    var pt = new GLatLng(lat, lng);
    var marker = new GMarker(pt, {draggable: true, trackMarkers: true});
                map.addOverlay(marker);
                GEvent.addListener(marker, 'click', function(latlng){
                    var min = '<div class=texto_simples>Informações Simplificadas:<br>Clique em [+] para maiores informações.<br>Dados para Referência:<br> ' + latlng + '</div>';
                    var sum = 'Informações sobre a Localização GPS (em decimais-compatível Google Maps):<br><b>GPS: ' + latlng + '</b> e <b>' + Math.random() + '</b>';
                    
                    var tabs = [
                     new MaxContentTab('Um texto aqui', 'marker content 0'),
                     new MaxContentTab('Um texto aqui', 'marker content 1'),
                     new MaxContentTab('Um texto aqui', 'marker content 2'), 
                     new MaxContentTab('Um texto aqui', 'marker content 3')];
                       marker.openMaxContentTabsHtml(map, min, sum, tabs, {
                      maxTitle: "<div class=texto_simples>Informações Complementares</div>"
                    });
                });
    }

    
    
    
    // Ativa Função de arraste do Mapa com o Mouse - Chamado diretamente do Sistema
    function eDrag() {
    map.enableDragging();
    }
    // Desativa a Função de Arraste do Mapa com o Mouse - Chamado diretamente do Sistema
    function dDrag() {
    map.disableDragging();
    }
    
    // Refresh para os pontos
    function reloadMarkers() {
      mm.refresh();
    }
    
    // Seção de Controles
    // **************************************************************
    
    // Função para Remover Controles
    function removecontroles(){
    // Ativa Controle de Zoom e Slider
    map.removeControl(ctrl1);
    // desativa Controle de Tipo de Mapa
    map.removeControl(ctrl2);
    // Desativa Controle de Zoom out e In
    map.removeControl(ctrl3);
    // Dessativa Escala
    map.removeControl(ctrl4);
    // Desativa visualização de GPS
    map.removeControl(ctrl5);
    }
    
    // Funções de Remoção para Cada Controle
    // Remove somente o controle selecionado

    // Remove Zoom
    function removezoom() {
    map.removeControl(ctrl1);
    }
    
    // Remove Tipo de Mapa
    function removetipomapa() {
    map.removeControl(ctrl2);
    }
    
    // Remove Controle de Zoom
    function removectrlzoom() {
    map.removeControl(ctrl3);
    }
    
    // Remove Zoom
    function removeescala() {
    map.removeControl(ctrl4);
    }
    
    // Remove GPS
    function removegps() {
    map.removeControl(ctrl5);
    }
        
    // *************************************************************
        
    // Função para reativar Controles
    function reativacontroles(){
    // Ativa Controle de Zoom e Slider
    map.addControl(ctrl1);
    // Ativa Controle de Tipo de Mapa
    map.addControl(ctrl2);    
    // Controle de Zoom out e In
    map.addControl(ctrl3);
    // Ativa Escala
    map.addControl(ctrl4);
    // Ativa visualização de GPS
        if (ctrl5 == 10)
            {
            }
        if (ctrl5 != 10)
            {    
                map.addControl(ctrl5);
            }     
    }
    
    // Funções para Cada Controle
    // Adiciona somente o controle desejado
    
    function reativazoom(){
    // Ativa Controle de Zoom e Slider
    map.addControl(ctrl1);
    }
    
    // Ativa Tipo de Mapa
    function reativatipomapa() {
    map.addControl(ctrl2);
    }
    
    // Ativa Controle de Zoom
    function reativactrlzoom() {
    map.addControl(ctrl3);
    }
    
    // Ativa Zoom
    function reativaescala() {
    map.addControl(ctrl4);
    }
    
    // Remove GPS
    function reativagps() {
        if (ctrl5 == 10)
        {
        }
        if (ctrl5 != 10)
        {    
            map.addControl(ctrl5);
        }
    }
    

    // ** Fim de seção de controles    
    
    // Atualiza Janela GPS
    function atualizajanelagps(tipocoord, posjanela) {
        
        if (tipocoord == 0) 
        {
            if (posjanela == 0)
            {
            removegps();
            var pos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, 45));
            ctrl5 = new MStatusControl({DMS:true, position:pos, background:'#FFB381', foreground:'#000000', vertical:true});
            map.addControl(ctrl5); 
            }
            if (posjanela == 1)
            {
            removegps();
            var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(65, 0));
            ctrl5 = new MStatusControl({DMS:true, position:pos, background:'#FFB381', foreground:'#000000', vertical:true});
            map.addControl(ctrl5); 
            }
            if (posjanela == 2)
            {
            removegps();
            ctrl5 = new MStatusControl({DMS:true, background:'#BFDBFF', foreground:'#15428B'});
            map.addControl(ctrl5); 
            }
        }
        if (tipocoord == 1) 
        {
            if (posjanela == 0)
            {
            removegps();
            var pos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, 45));
            ctrl5 = new MStatusControl({DMS:false, position:pos, background:'#FFB381', foreground:'#000000', vertical:true});
            map.addControl(ctrl5); 
            }
            if (posjanela == 1)
            {
            removegps();
            var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(65, 0));
            ctrl5 = new MStatusControl({DMS:false, position:pos, background:'#FFB381', foreground:'#000000', vertical:true});
            map.addControl(ctrl5); 
            }
            if (posjanela == 2)
            {
            removegps();
            ctrl5 = new MStatusControl({DMS:false, background:'#BFDBFF', foreground:'#15428B'}); 
            map.addControl(ctrl5); 
            }
        }
        if ((tipocoord == 5) & (posjanela == 5))
        {
            ctrl5 = 10;
        }
                
    }
    // Fim de Script
</script>
</body>
</html>

Repare que ele cita 3 scripts externos,:

<script src="tabbedmaxcontent.js" type="text/javascript"></script> <script src="dragzoom.js" type="text/javascript"></script> <script src="MStatusControl.js" type="text/javascript"></script>

Estes scripts, são necessários para alguns efeitos e recursos adicionais, e estão disponíveis nos seguintes endereços, com suas respectivas explicações:

tabbedmaxcontent.js http://code.google.com/p/gmaps-utility-lib...ontent.js?r=139 dragzoom.js http://code.google.com/p/gmaps-utility-lib...agzoom.js?r=114 MStatusControl.js http://maps.forum.nu/gm_MStatusControl.html

Cada um destes Scripts, tem suas funções e configurações, mas por padrão, se você baixa-las e coloca-las na mesma pasta do Mapa.html irão funcionar. Basta salvar com o mesmo nome orginal. Em cada um dos endereços acima, você encontrará explicações e exemplos de uso, e poderá descobrir o que pode ser feito com eles. No meu exemplo "Mapa.html" criei funções em JavaScript para retirar e inserir novamente os controles no mapa. Assim, nossa vida é facilitada para usar os diversos recursos que o Google Maps nos oferece. Aqui, desativei o Google Earth 3D, mas você poderá usa-lo também, porém, os camandos em JavaScritp são exclusivos para Google Maps, e não irão funcionar para o 3D. Vamos para o Delphi: Crie uma nova aplicação, e vamos inserir os componentes no FORM. Adicionei no USES os seguintes recursos: SHDocVw, MSHTML, ActiveX. Coloque um WebBrowser e aumente ele do tamanho que desejar no FORM. O Mapa foi feito para se auto-ajustar ao tamanho disponível com CSS. No ONCREATE do Form1 deixe com os seguintes dados:

procedure TForm1.FormCreate(Sender: TObject); var diretorio: string; begin diretorio := extractFilepath(application.exename); WebBrowser1.Navigate(diretorio + 'mapa.html'); end;

Assim, ele busca o mapa no diretório da aplicação que você está fazendo, e executa a página assim que o programa for executado. Para isso funcionar, você precisa salvar sua aplicação na mesma pasta onde você salvou o Mapa.html. Pronto. Até aqui, qualquer tutorial da web faria o trabalho. Agora vem o truque ;) Para cada função que temos no mapa.html em JavaScript, poderemos chama-la diretamente de dentro do Delphi, com os sequintes comandos: Crie um Button e dê um duplo clique nele. Isso abrirá o procedimento Clique dele, onde você chamará a função em JavaScript da página HTML.

procedure TForm1.Button1Click(Sender: TObject);
var variaveis :string;
begin
// isso aqui abaixo, é necessário para executar comandos diretamente no WebBrowser
with WebBrowser1.Document as IHTMLDocument2 do with parentWindow do
begin
     // Aqui eu digo qual função eu quero chamar, e jogo isso para a variável
     variaveis := 'ddragpoint()';
     // Aqui ele executa o JavaScript propriamente dito, dentro do Mapa.html que está ativo no WebBrowser:
     execScript(variaveis, 'JavaScript');
end;
end;

Isto é só um exemplo veja as funções, e crie botões conforme sua necessidade. Para adicionar pontos móveis, com abas, e com tudo que tem direito, execute a função (Use isso somente depois de ter todos os JavaScripts dentro da mesma pasta):

procedure TForm1.Button1Click(Sender: TObject);
var variaveis :string;
begin
with WebBrowser1.Document as IHTMLDocument2 do
    with parentWindow do

begin
variaveis := 'createMapMarker("20","30","Exemplo","Exemplo","Aba 1", "Aba 2")';
execScript(variaveis, 'JavaScript');
end;
end;

Bem, agora é somente diversão. Use JavaScript para chamar ou executar qualquer coisa no mapa, ou em outra aplicação. É possível assim, interagir com aplicações web, e outras "coisitas más". Bom uso, boa diversão. O Mais chato tá feito, prontinho em HTML. Para funções que estejam assim no java script:

function NomedaFuncao() {
}

Não há necessidade de parâmetros. Caso esteja assim:

function NomedaFuncao(nome1,nome2) {
}

Você precisará informar parâmetros para funcionar tudo certinho.

Para maiores informações, consulte a API do Google Maps, e faça as adaptações necessárias ao seu projeto.

Até e bom uso.

Adriano - Brasil

------------------------------------------------------------------------------

"O Senhor é quem dá a Sabedoria, é dEle que vem a inteligência."

Editado Julho 28, 2009 por cobbra

Fuzari · Janeiro 4, 2010

Adriano tudo bem?

Fiquei estusiasmado com a sua dica. No entanto, salvei o arquivo mapa.html e ele nem abre. Aparece a linha com a key gerada no google maps e o mapa não aparece.

Tem alguma dica?

obrigado

Fuzari.

fuzari@task.com.br

Entrar

Usando Google Maps no Delphi

Pergunta

cobbra

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Fuzari

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades