Início > Artigos, Blogs e Sites > Guia de endereço GoogleMaps – Delphi

Guia de endereço GoogleMaps – Delphi

Neste Artigo vamos criar um exemplo simples de busca de endereço com o Google Maps onde digitaremos o endereço, cidade, estado e fazer a busca, onde será mostrado o mapa da busca solicitada.

Neste Artigo vamos criar um exemplo simples de busca de endereço com o Google Maps onde digitaremos o endereço, cidade, estado e fazer a busca, onde será mostrado o mapa da busca solicitada.

Iniciaremos agora criando um novo projeto em Delphi e iremos adicionar um TPanel, TLabel, TMemo, TButton e um TWebBrowser, abaixo temos o layout bem simples do formulário.

Figura 1. Layout do Formulário

Agora vamos mudar algumas propriedades dos componentes:

Form1 WindowState mude para wsMaximized

Panel1 Align mude para alTop

WebBrowser1 Align mude para alClient

Label1 Caption mude para Endereço

Button1 Caption mude para Localizar Endereço

Memo1 ScrollBars mude para ssBoth

Memo1 Lines mude para Av. Paulista, São Paulo, SP

Observação: para fazer a busca de endereço pelo Google Maps o padrão é: endereço, cidade, estado; e sempre teremos que separar por vírgula.

Agora vamos implementar nosso código:

1. Inclua as classes MSHTML e ActiveX no uses e crie uma variável private:

HTMLWindow2: IHTMLWindow2 ; .

Ficando assim nosso código até o momento :

unit Unit1;
interface
uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.OleCtrls, SHDocVw, Vcl.StdCtrls,
  Vcl.ExtCtrls, MSHTML , ActiveX;

type
  TForm1 = class(TForm)
    Panel1: TPanel;
    Label1: TLabel;
    Memo1: TMemo;
    Button1: TButton;
    WebBrowser1: TWebBrowser;
  private
    { Private declarations }

    HTMLWindow2: IHTMLWindow2;

  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

end.

2. Agora vamos criar uma constante HTMLStr com o script da GoogleMaps, logo abaixo do Implementation, deixando o código desta maneira:

unit Unit1;
interface
uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.OleCtrls, SHDocVw, Vcl.StdCtrls,
  Vcl.ExtCtrls, MSHTML,  ActiveX;

type
  TForm1 = class(TForm)
    Panel1: TPanel;
    Label1: TLabel;
    Memo1: TMemo;
    Button1: TButton;
    WebBrowser1: TWebBrowser;
  private
    { Private declarations }
    HTMLWindow2: IHTMLWindow2;
  public
    { Public declarations }
  end;
var
  Form1: TForm1;
implementation
{$R *.dfm}

const
  HTMLStr: AnsiString = '<html> ' + '<head> ' +
    '<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> ' +
    '<script type="text/javascript" src=
     "http://maps.google.com/maps/api/js?sensor=true"></script> '
    + '<script type="text/javascript"> ' + '' + '' + '  var geocoder; ' +
    '  var map;  ' + '  var trafficLayer;' + '  var bikeLayer;' +
    '  var markersArray = [];' + '' + '' + '  function initialize() { ' +
    '    geocoder = new google.maps.Geocoder();' +
    '    var latlng = new google.maps.LatLng(-23.563596,-46.653883); ' +
    '    var myOptions = { ' + '      zoom: 13, ' + '      center: latlng, ' +
    '      mapTypeId: google.maps.MapTypeId.ROADMAP ' + '    }; ' +
    '    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); '
    + '    trafficLayer = new google.maps.TrafficLayer();' +
    '    bikeLayer = new google.maps.BicyclingLayer();' +
    '    map.set("streetViewControl", false);' + '  } ' + '' + '' +
    '  function codeAddress(address) { ' + '    if (geocoder) {' +
    '      geocoder.geocode( { address: address}, function(results, status) { '
    + '        if (status == google.maps.GeocoderStatus.OK) {' +
    '          map.setCenter(results[0].geometry.location);' +
    '          PutMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng(),
 results[0].geometry.location.lat()+","+results[0].geometry.location.lng());'
    + '        } else {' +
    '          alert("Geocode was not successful for the following reason: " + status);'
    + '        }' + '      });' + '    }' + '  }' + '' + '' +
    '  function GotoLatLng(Lat, Lang) { ' +
    '   var latlng = new google.maps.LatLng(Lat,Lang);' +
    '   map.setCenter(latlng);' + '   PutMarker(Lat, Lang, Lat+","+Lang);' +
    '  }' + '' + '' + 'function ClearMarkers() {  ' +
    '  if (markersArray) {        ' + '    for (i in markersArray) {  ' +
    '      markersArray[i].setMap(null); ' + '    } ' + '  } ' + '}  ' + '' +
    '  function PutMarker(Lat, Lang, Msg) { ' +
    '   var latlng = new google.maps.LatLng(Lat,Lang);' +
    '   var marker = new google.maps.Marker({' + '      position: latlng, ' +
    '      map: map,' + '      title: Msg+" ("+Lat+","+Lang+")"' + '  });' +
    ' markersArray.push(marker); ' + '  }' + '' + '' +
    '  function TrafficOn()   { trafficLayer.setMap(map); }' + '' +
    '  function TrafficOff()  { trafficLayer.setMap(null); }' + '' + '' +
    '  function BicyclingOn() { bikeLayer.setMap(map); }' + '' +
    '  function BicyclingOff(){ bikeLayer.setMap(null);}' + '' +
    '  function StreetViewOn() { map.set("streetViewControl", true); }' + '' +
    '  function StreetViewOff() { map.set("streetViewControl", false); }' + '' +
    '' + '</script> ' + '</head> ' + '<body onload="initialize()"> ' +
    '  <div id="map_canvas" style="width:100%; height:100%"></div> ' +
    '</body> ' + '</html> ';

end.

3. No Evento OnCreate do Form1 implemente o código abaixo:

procedure TForm1.FormCreate(Sender: TObject);
var
  aStream: TMemoryStream;
begin
  WebBrowser1.Navigate('about:blank');
  if Assigned(WebBrowser1.Document) then
  begin
    aStream := TMemoryStream.Create;
    try
      aStream.WriteBuffer(Pointer(HTMLStr)^, Length(HTMLStr));
      aStream.Seek(0, soFromBeginning);
      (WebBrowser1.Document as IPersistStreamInit)
        .Load(TStreamAdapter.Create(aStream));
    finally
      aStream.Free;
    end;
    HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;
  end;
end;

4. No Evento OnClick do Button1 implemente o código abaixo

procedure TForm1.Button1Click(Sender: TObject);
var
  address: string;
begin
  address := Memo1.Lines.Text;
  address := StringReplace(StringReplace(Trim(address), #13, ' ', [rfReplaceAll]
    ), #10, ' ', [rfReplaceAll]);
  HTMLWindow2.execScript(Format('codeAddress(%s)', [QuotedStr(address)]),
    'JavaScript');
end;

Neste momento se você executar o projeto vai ter o seguinte resultado

Figura 2. Executando o projeto

5. Agora vamos disponibilizar 3 funções criada no script do GoogleMaps para isso insira 3 TCheckBox como mostra a figura abaixo:

Figura 3. Incluindo 3 TCheckBox

Alterando propriedades dos componentes TCheckBox:

CheckBox1 Caption mude para Tráfego

CheckBox2 Caption mude para Ciclovia

CheckBox3 Caption mude para Street View

6. No Evento OnClick do CheckBox1 implemente o código abaixo:

procedure TForm1.CheckBox1Click(Sender: TObject);
begin
  if CheckBox1.Checked then
    HTMLWindow2.execScript('TrafficOn()', 'JavaScript')
  else
    HTMLWindow2.execScript('TrafficOff()', 'JavaScript');
end;

7. No Evento OnClick do CheckBox2 implemente o código abaixo:

procedure TForm1.CheckBox2Click(Sender: TObject);
begin
  if CheckBox2.Checked then
    HTMLWindow2.execScript('BicyclingOn()', 'JavaScript')
  else
    HTMLWindow2.execScript('BicyclingOff()', 'JavaScript');
end;

8. No Evento OnClick do CheckBox3 implemente o código abaixo:

procedure TForm1.CheckBox3Click(Sender: TObject);
begin
  if CheckBox3.Checked then
    HTMLWindow2.execScript('StreetViewOn()', 'JavaScript')
  else
    HTMLWindow2.execScript('StreetViewOff()', 'JavaScript');
end;

Figura 4. Imagem Final do Projeto

Considerações finais:

Lembrando que a pesquisa tem que ter o padrão endereço, cidade, estado e que sempre teremos que separá-la por vírgula, o número do endereço é opcional.

Exemplo: Av. Paulista 1000, São Paulo – SP

O mapa tem todas as funcionalidades como: +Zoom; -Zoom; duplo clique no mapa, entre outros.

Quando o projeto é executado esta vindo por default o mapa da cidade de São Paulo na Av. Paulista, claro que isso pode ser alterado de várias maneiras em tempo de execução alterando o método LatLng(-23.563596,-46.653883); Longitude e a Latitude no script criado.

Segue a linha a ser alterada no script :

var latlng = new google.maps.LatLng(-23.563596,-46.653883);

Conclusão

Em um sistema comercial que faz entrega seria interessante ter uma busca online de endereços, claro que um exemplo simples, porém espero que tenham gostado .

arquivos fonte clique aqui

Um grande abraço a todos!

Anúncios
Categorias:Artigos, Blogs e Sites
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: