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.

Layout 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
Nota: 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:

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.

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.

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;
Listagem 1. NOME

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:

Executando o projeto
Figura 2. Executando o projeto

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

Incluindo 3 TCheckBox
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

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;
Listagem 1. NOME

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;
Listagem 1. NOME

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;
Imagem Final do Projeto
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.