Usando Google Maps no Delphi, Como usar funções do Google Maps no Delphi

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

CODE









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;
}


#zoominout
{
font-family:Arial, Helvetica, sans-serif;
font:"Arial";
padding:10px;
font-size:10px;
border:solid 1px;
border-color:#000000;
}
-->
















// 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: '[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]',
buttonStyle: {width:'17px', height:'17px'},
buttonZoomingHTML: ' Clique e arraste sobre uma área do MAPA
(ou clique aqui
para resetar)
',
buttonZoomingStyle: {background:'#BFDBFF', width:'100px', height:'100%', color:'#15428B'},
backButtonHTML: '[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]',
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 = ' Informações Simplificadas:
Clique em [ ] para maiores informações.
Dados para Referência:
' latlng '
';
var sum = 'Informações sobre a Localização GPS (em decimais-compatível Google Maps):
GPS: ' latlng ' e ' Math.random() '';

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: " Informações Complementares

"
});
});
}




// 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





Repare que ele cita 3 scripts externos,:
QUOTE




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:

QUOTE
tabbedmaxcontent.js
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

dragzoom.js
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

MStatusControl.js
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


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:
QUOTE
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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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.

CODE
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):
CODE
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:

CODE
function NomedaFuncao() {
}


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

CODE
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.

Créditos:
Adriano