Aplicação Delphi acessando Google Maps

Neste artigo desenvolveremos uma aplicação em Delphi acessando o GoogleMaps através dos componentes da GMLib.

Necessidade de Localizar

Ao longo desses anos trabalhando no setor de  tecnologia e desenvolvimento de empresas do ramo de logística e distribuição de produtos farmacêuticos, sempre encontro a necessidade de implantar nas empresas pequenas soluções, capazes de automatizar e/ou otimizar processos, e geralmente essa necessidade exige velocidade na concepção das soluções, para isso não existe nada é mais rápido que o Delphi.

Com a popularização do Google Maps, o acesso a dados GPS, a geolocalização entra de vez no cotidiano das pessoas e com isso, de quebra acaba chegando também às empresas dos mais diversos tamanhos e ramos da economia. Imagine uma empresa que deseja visualizar a localização de seus clientes no mapa, plotar pontos onde vendeu determinados produtos. Pois bem, nessa postagem estaremos fazendo exatamente isso.

Para isso utilizaremos o Delphi e a suite de componentes livre que baixaremos através do link. Trata-se de um projeto ainda em versão beta mas muito satisfatório uma vez que nos proporciona agilidade no que se propõe.

Instalando o GMLib 

Feito o download, extraia os arquivos em um diretório a sua escolha. Abra seu Delphi, no meu caso estarei instalando no Delphi XE3, vá até o diretório onde extraiu os arquivos do GMLIB, lá localize e abra o arquivo GMLibProject_DXE3.groupproj. Delphi com Google Maps - GMLib

Note que o projeto foi carregado no project manager, selecione através de um duplo clique o pacote GMLib_DXE3.bpl, selecione a plataforma 32-bit Windows em Target Platform, clique com o botão direito sobre o arquivo GMLib_DXE3.bpl e selecione a opção Compile em seguida a opção Install. Repita esse procedimento para a plataforma 64-bit Windows e faça o mesmo para os demais pacotes (.bpl): GMLib_DXE3_VCL.bpl, GMLib_DXE3_FMX.bpl e GMLibEdit_DXE3.bpl.
Agora que foram compilados e instalados os componentes, precisamos apontar os diretorios em Library Path.

Delphi com Google Maps - GMLib

Vá em Tools –> Options –> Environment Options –> Delphi Options –> Library. No lado direito da tela selecione a 32-bit Windows para a plataforma, em Library Path clique no botão reticências […] navegue até a pasta onde você extraiu os arquivos do GMLib, localize a pasta libDXE3 e pressione OK em seguida Add. Faça o mesmo com as pastas libDXE3VCL e libDXE3FMX, vá agora até a pasta src e depois com as pastas srcVCL e srcFMX. Repita o procedimento para a plataforma 64-bit Windows e já podemos finalizar a instalação através do menu File –> Close All.

Conhecendo os componentes
Delphi com Google Maps - GMLib

Brevemente vamos fazer a apresentação dos compenentes que serão usados no nosso exemplo.

  • TGMMap é responsável por acionar o mapa propriamente dito, enfim é ele o responsável por projetar nosso mapa num TWebBrowser.
  • TGMMarker é o componente responsável por inserir marcadores no mapa relacionado.
  • TGMGeoCode é o componente que utilizaremos para receber o posicionamento (geolocalização).

Basicamente temos tudo o que iremos precisar para termos nosso mapa. Caso você queira se aprofundar mais na suite de componetes acesse o e consulte a documentação de todos os componentes da suite.

begin: Criando a interface

Com o Delphi aberto, vamos iniciar um novo projeto. Acesse  File–> New –> VCL Forms Application, vamos salvar nosso projeto, dê um Save All, no meu caso chamarei o projeto de ArtigoMapa, nosso formulário se chamará frmPrincipal e sua Unit será frmPrincipalUnt.
Adicione os componentes no nosso formulário, vamos precisar destes: um panel (com alinhamento alBotton), um WebBrowser (alinhamento AllClient), um ClientDataSet, um DataSource. Dentro do Panel, adicione um DBGrid e um DBNavigator. No ClientDataSet, clique com botão direito sobre ele e selecione a opção Fields Editor para que possamos criar a estrutura da nossa tabela.
Teremos basicamente 2 campos: Referência e Endereço. Com o Editor de Campos aberto clique sobre ele com o botão direito e acione a opção New Field para criarmos nosso primeiro campo. Altere a propriedade Name para Referencia, Type para String e Size para 30, em seguida clique em OK.

Delphi com Google Maps - GMLib

Repita o procedimento para criar o campo Endereco, este porém atribua 120 na propriedade Size. Com os dois campos já criados, feche o Editor de Campos e  vamos clicar com o botão direito sobre o ClientDataSet e vamos acionar a opção Create DataSet para criarmos o arquivo de dados. Vamos alterar a propriedade FileName do ClientDataSet, clicando sobre seu botão reticências […], para Referencia.xml.
Vamos agora ligar os componentes de acesso a dados… altere a propriedade DataSource do DBGrid e do DBNavigator apontando para o DataSource que inserimos (DataSource1). No nosso DataSource altere a propriedade AutoEdit para False e a propriedade DataSet apontando para o ClientDataSet (ClientDataSet1), com isso termos a parte de dados da aplicação pronta para rodar necessitando apenas de pequenos ajustes para a gravação de dados que veremos a seguir.

Até aqui tudo tranquilo, nenhuma novidade né? Vamos então a parte específica de nosso artigo, adicionaremos agora os componentes da Paleta GoogleMaps, insira no projeto um GMMap, um GMGeoCode, um GMMarker. Configuraremos esses componentes da seguinte forma: vamos alterar a propriedade Language de todos eles para PortuguesBR, no GMMap vamos alterar a propriedade IntervalEvents para 0 e a propriedade WebBrowser vamos apontar para o que temos no projeto (WebBrowser1), no GMMarker vamos alterar a propriedade Map apontando-a para nosso GMMap (GMMap1) e no GMGeoCode vamos alterar a propriedade Marker para que aponte para nosso GMMarker (GMMarker1).

Delphi com Google Maps - GMLib

Adicionando as funcionalidades

Para tudo fazer sentido vamos adicionar as funcionalidades básicas de nossa aplicação. No evento onActivate do frmPrincipal teremos:

procedure TfrmPrincipal.FormActivate(Sender: TObject);

begin

ClientDataSet1.Open;

end;

isso fará com que a aplicação abra o ClientDataSet possibilitando-nos inserir as referências e endereços a serem mapeados. Vamos executar a aplicação e confirmar o funcionamento… clique sobre o botão Adicionar (“+”) para adicionar registros em nossa aplicação, insira os registros e clique sobre o botão Postar (“V”) para gravar os registros. Os meus registros foram:

  • Engenhão | Estádio Olímpico João Havelange – Rua das Oficinas, Rio de Janeiro.
  • Maracanã | Estádio Mário Filho – Maracanã – Rua Professor Eurico Rabelo, Rio de Janeiro.
  • Fluminense F.C. | R. Álvaro Chaves, 41

Agora já temos dados para que o mapa exiba lugares conhecidos. Feche a aplicação e vamos agora inserir o código para efetuarmos a plotagem dos endereços no mapa efetivamente.

Plotando os endereços no mapa

Para que o mapa seja processado pela aplicação devemos no evento AfterPageLoaded do GMMap vamos inserir a seguinte linha:

procedure TfrmPrincipal.GMMap1AfterPageLoaded(Sender: TObject; First: Boolean);

begin

GMMap1.DoMap;

end;

 

Vamos agora atribuir ao evento onDblClick de nosso DBGrid a funcionalidade de exibir um marcador com o registro selecionado no mapa, para tal insira o código:

procedure TfrmPrincipal.DBGrid1DblClick(Sender: TObject);

begin

GMMap1.Active := True;

if DataSource1.DataSet.RecordCount > 0 then

begin

GMGeoCode1.Geocode(ClientDataSet1Endereco.AsString);

GMMarker1.Items[DataSource1.DataSet.Recno].CenterMapToMarker;

end;

end;

Basta agora executar e temos a aplicação cumprindo o seu propósito inicial, de maneira bem simples.

Delphi com Google Maps - GMLib
Você pode se aprofundar mais nos componentes e deixar sua imaginação cuidar do resto, vale ressaltar que o componente traz um aplicativo demo muito interessante que vale a pena dar uma olhada.

end;

delphidesenvolvimentoGMapsGMLibGoogle Maps
By Delphi, Tutorial42 comentários em Aplicação Delphi utilizando Google Maps – Google Maps Library

42 Replies to “Aplicação Delphi utilizando Google Maps – Google Maps Library”

  1. Simples e rápido…

    procedure TForm1.BitBtn1Click(Sender: TObject);
    var
    acha:string;
    begin
    acha:=’http://maps.google.com/maps?q=’+edit1.text;
    WebBrowser1.Navigate(acha);
    end;

    1. Olá Marques… o componente abordado no artigo te dá acesso a alguns recursos a mais, como marcadores e outras coisinhas… se interessar de uma pesquisada.
      Também já abordei em outros artigos a passagem direta da linha de endereço num TWebBrowser.
      De qualquer forma, valeu pela participação.

      Abração.

      1. Olá Luciano seja bem vindo!
        Geralmente esses componentes que fazem referência ao browser IE, tente primeiramente atualizar o seu, em seguida baixe uma versão mais nova da GMLib pois o Google sempre faz atualizações e nesse aspecto pode ter sido gerada uma incompatibilidade… faz-se notar que recentemente foi liberada uma nova versão (GMLib v. 1.5.3), talvez já corrija seu problema.

        No mais obrigado por sua participação e não deixe de mandar um feedback após os procedimentos adotados.
        Até a próxima!

  2. Ola Landerson, muito bom seu tutorial, realmente esse componente abre grandes possibilidades a mais do que só mostrar um endereço no mapa, inclusive to pesquisando sobre “ROTEAR” varios pontos, e nao encontrei ainda nenhuma documentação, voce tem algum outro tutorial sobre “traçar rotas com mais de um endereço de LAT/LONG” ??
    de qualquer forma, parabéns pelo o tutorial e ainda to atras do roteamento por LAT/LONG de mais de um ponto..!
    Valeu!!

    1. Gostei do componente. O problema é que, seguindo o tutorial do Landerson, não funciona.
      Já refiz a aplicação diversas vezes e não funciona.

      Existe algum outro material à respeito?

      Grato pela atenção,
      Leonardo.

      1. Olá Leonardo… o que pode estar acontecendo é que com a atualização da API do Google Maps algumas funções antigas pararam de funcionar.
        Você chegou a acessar o site do Cadetil?
        Na verdade a grande maioria dos arquivos que você encontrar vai referenciar a API mais antiga… particularmente eu a primeira vez que precisei de fazer uso de maps utilizei este artigo do Marco Cantù como base.
        Numa busca rápida pelo Google você vai encontrar algumas alternativas.
        O tutorial eu nunca mais refiz, apenas divulguei após fazer utilização do componente em um projeto.
        Espero que consiga prosseguir aí!
        Abraço.

    1. Olá Washington… na verdade para ir um pouco mais a fundo aconselho dar uma estuada na página do componente.
      Já cheguei a ver exemplos que fazem essa “distância” através da api do Google Maps… que também é interessante buscar conhecimento.

      Espero ter ajudado.

    2. @Washington: sim, você pode calcular as distâncias entre pontos. Na unidade GMFunctions tem a classe TGeometry que contém várias class function, incluindo ComputeDistanceBetween
      @Landerson: obrigado por este post

      desculpe pelo meu Português, eu não falo muito bem

      1. Cadetill… na verdade nós que agradecemos a disponibilização do componente. Eu particularmente agradeço sua participação no blog e a disponibilização de seu tempo em atender a dúvida do Washington.

        Obrigado mesmo!

  4. Pingback: Nova versão de Componentes da GMLIB liberada | Landerson Gomes

    1. Olá Luisandro! Seja bem vindo ao Blog!!!
      Fique acompanhando, quem sabe o Xavier não nos surpreende compatibilizando o componente com Firemonkey?!
      O Cadettil tem atualizado sempre o componente, vamos aguardar!!!

      Até mais!

  8. Muito Bom!!
    Obrigado pelo trabalho e pela iniciativa de compartilhar conosco aqui(web) o seu conhecimento.
    E, agradecer também ao amigo “cadetill” que respondeu a minha dúvida também.rs

    Já esperando novidades…

    Abraço

  9. Primeiramente gostaria de agradecer pelo excelente post e pela atenção disponibilizada a todos nós.

    Gostaria de saber se há uma forma de pegar as coordenadas (LAT/LNG) por um endereço?

    Desde já agradeço a atenção.

    1. Olá Douglas! Seja bem vindo ao blog!!!
      Estou trabalhando numa postagem com essa funcionalidade, em breve estará disponível!

      Obrigado por sua participação!

  10. Boa tarde, fiz todo processo mas só apareceu 4 componentes na paleta GoogleMaps.
    TGMInfoWindow, TGMGeoCode, TGMGroundOverlay, TGMHeatmap.
    O que será que eu fiz errado?
    Outra coisa, essa versão 1.5.0 funciona no Android?

    Desde já agradeço.

    1. Olá Wellington, nos comentários da postagem NOVA VERSÃO DE COMPONENTES DA GMLIB LIBERADA, que trata uma atualização da versão dos componentes, foi perguntado a mesma coisa.
      Até a presente data a resposta para o funcionamento em Android é negativa.
      Lembrando que se você estiver utilizando o XE8, o TMapView pode conter a solução para seu problema.

      Obrigado por sua participação e até a próxima!

    1. Olá Gilmar… poderia ser mais específico quando você diz ambiente web está falando de Intraweb???

      Desde já obrigado por sua participação e seja bem vindo!

      1. Olá quando digo Web seria para rede extraweb diretamente na Internet. poder criar páginas diretamente no Delphi etc.. se puder me enviar exemplos agradeço, obrigado. Gilmar

    1. Olá Leonardo…
      Temos versão nova sim, GMLib 1.5.3 … Xavier publicou essa semana que passou, dá uma pesquisada lá no site do Cadetill.

      Não deixe de postar um feedback, e gostaria de antemão sugeri uma olhada no MegaDemo, ele contempla exemplos de várias situações úteis.

      Grande abraço e até a próxima!

  13. Bom dia Landerson,

    Por acaso tem um exemplo de como montar uma aplicação desktop usando API do Google Maps para exibir a localização de um aparelho celular android?

    Grato pela atenção,

    1. Olá Murilo bem vindo! Bem primeiramente você precisa fazer com que o celular envie as coordenadas para você, teoricamente isso não é dificíl, o exemplo abordado nesta postagem: SENSOR DE LOCALIZAÇÃO DE DISPOSITIVOS MÓVEIS COM DELPHI XE5, faz com que você capte a localização do aparelho, daí em diante existem várias formas para você fazer com que isso chegue ao desktop, tudo vai depender da arquitetura que pretende adotar em sua aplicação.

      Espero tê-lo ajudado, obrigado por sua participação e até a próxima!

  14. estou desenvolvendo um aplicativo que vai calcular rotas através da localização do aparelho e as coordenadas que vai esta gravado no banco de dados.. vou mostrar esses dados no listview ou listbox.. quero saber a distancia que estou em cada ponto..

    exemplo : cada coordenada vai ser um restaurante ou lanchonete.. quero saber a distancia de cada um deles através da minha localização.

    1. Olá Marcos bem vindo!
      Algum progresso aí?
      Bem primeiramente se ainda estiver com o problema, sugiro uma boa lida no material do Cadettil … tavlez até mesmo um contato com ele para saber se já existe um componente que faça o que está demandando.
      (se já existir, não há por que reinventar a roda)

      Favor poste aqui seu status em relação ao problema, demorei demais para responder.

      Desde já agradeço sua participação.

  15. Gostaria de saber se neste componente existe a possibilidade de passando o endereço por String me retornar a localização, já que fazendo desta forma como no tutorial eu vou parar no mar

    Obrigado!

  16. Como converter as coordenadas de tela em lat/long?
    É possível acessar o canvas do GMmap?
    Preciso desenhar linhas, retas, círculo, e retangulo com o mouse ,
    para posteriormente obter o lat/long desses desenhos.

    1. Olá Anderson!
      Desculpe pela demora em respondê-lo… mas vamos lá, no exemplo em questão não seriam necessários pois eu salvo os dados pelo próprio ClientDataSet.

      Muito provavelmente o erro é outro… ainda está com o erro aí?

      Desde já agradeço sua participação, seja bem vindo!

  19. Ola Landerson como eu faria de no lugar de pegar os dados do dataset apenas pegar dados de dois edits um que seria latitude e do outro que seria longitude e fosse por um botao mesmo aparecendo o local no mapa?

Deixe um comentário