Rodrigo Pádua

Requisitos:
1. Prototype
2. Google Maps API
3. GMapEasy
4. GxMarker v1 alterada por Rodrigo Pádua

Neste artigo vou falar sobre mais uma funcionalidade da GMapEasy e como essa lib torna fácil a tarefa de localizar manualmente as coordenadas geográficas de um ponto. Aconselho a leitura do artigo anterior, “Facilitando o uso do Google Maps API com a GMapEasy“.

O que deve ser feito?

A primeira coisa a ser definda é a coordenada inicial onde o marcador deverá aparecer. Você pode especificar as coordenadas diretamente, ou utilizar um endereço textual para o GeoCoder encontrar as coordenadas automaticamente.

Localização inicial do ponto usando coordenadas:

var arCoordenadaCentral = new Array(new Array());

arCoordenadaCentral[0]['geo_lat'] = -16.668097558661785;
arCoordenadaCentral[0]['geo_lon'] = -49.26338195800781;

Localização inicial do ponto usando o GeoCoder:

var arCoordenadaCentral = new Array(new Array());

arCoordenadaCentral[0]['logradouro'] = 'Rua T vinte e oito';
arCoordenadaCentral[0]['numero'] = '400';
arCoordenadaCentral[0]['bairro'] = 'Setor Bueno';
arCoordenadaCentral[0]['localidade'] = 'Goiania';
arCoordenadaCentral[0]['cep'] = '74210-040';

Crie o “container” onde o mapa deverá se mostrado:

<div id="GMapEasy-sample" style="width:500px; height:400px;"></div>

Crie os elementos que deverão receber o valor da latitude e da longitude. Ex.: texfield, hiddenfield etc.:

<input name="hid_latitude" id="hid_latitude" type="hidden" />
<input name="hid_longitude" id="hid_longitude" type="hidden" />

Agora é só criar uma instância da GMapEasy:

new GMapEasy('GMapEasy-sample', {
    draggable: true,
    draggableFunc: "this.escreverCoordenadas('hid_latitude', hid_longitude')",
    arGeoCoder: arCoordenadaCentral
});

Feito. Agora você já pode movimentar o ponto no mapa manualmente e obter as coordenadas geográficas.

O código javascript completo para esse exemplo ficaria parecido com o código abaixo:

<script type="text/javascript">
document.observe('dom:loaded', function() {
	var arCoordenadaCentral = new Array(new Array());
	arCoordenadaCentral[0]['geo_lat'] = -16.668097558661785;
	arCoordenadaCentral[0]['geo_lon'] = -49.26338195800781;

	new GMapEasy('GMapEasy-sample', {
		draggable: true,
		draggableFunc: "this.escreverCoordenadas('hid_latitude', 'hid_longitude')",
		arGeoCoder: arCoordenadaCentral

	});
});
</script>

Clique aqui e veja o exemplo entendendo como funciona o ponto “draggable”.

Requisitos:
1. Prototype
2. Google Maps API + Key
3. GxMarker v.1 (alterada por Rodrigo Pádua)

Criei a GMapEasy em janeiro de 2007 quando precisei pela primeira vez inserir mapas em uma aplicação. O propósito dessa lib é facilitar a inserção de mapas em um site ou aplicação web, utilizando o Google Maps API com coordenadas ou com o GeoCoder, que localiza coordenadas através de um endereço textual.

Neste artigo irei apresentar a utilização básica dá lib e em outros artigos apresentarei usos mais avançados, como: a) localizar um ponto no mapa manualmente e obter as coordenadas; b) integração da lib com o PostGIS, selecionando registros com pontos localizados em uma determinada área do mapa; c) criando um polígono diretamente no mapa e armazenando no PostGis etc..

Vou começar falando como a lib funciona e no decorrer do artigo utilizaremos um exemplo escrito com a linguagem PHP, lembrado que você poderá usar qualquer linguagem para fazer a lib funcionar.

Existem 2 formas de marcar um ponto no mapa, que são:

1. Informar as coordenadas (latitude/longitude) diretamente; ou
2. Informar um endereço textual, como “Rua Machado de Assis, 200, Setor Oeste, Goiânia” e deixar que o próprio Google, através do GeoCoder, encontre as coordenadas.

Dê uma olhada no exemplo antes de iniciar a leitura sobre o funcionamento da GMapEasy.

Como funciona a GMapEasy?

A GMapEasy utiliza um vetor de 2 posições para tratar e inserir os pontos. A primeira posição do vetor é o contador de registros ex.: arrayPontos[0][...], arrayPontos[1][...], arrayPontos[2][...]. A segunda posição são as propriedades que a lib utilizará para marcar o ponto. As propriedade são as seguintes:

1. Índices do vetor para utilizar com coordenadas:
   arrayPontos[0]['geo_lat'];
   arrayPontos[0]['geo_lon'];
2. Índices do vetor para utilizar com o GeoCoder:
   arrayPontos[0]['logradouro'];
   arrayPontos[0]['numero'];
   arrayPontos[0]['bairro'];
   arrayPontos[0]['localidade'];
   arrayPontos[0]['cep'].

Você pode usar ainda as seguintes propriedades para coordenadas ou GeoCoder:

1. arrayPontos[0]['str_html']; o html que aparecerá no tooltip (janela com informações sobre o ponto);
2. arrayPontos[0]['link']; que deve conter a URL que será aberta caso o usuário clique no ponto;
3. arrayPontos[0]['icone']; nome do arquivo do ícone (ex.: casa. Informe apenas o nome do arquivo, sem a extensão) que deverá ser mostrado no ponto. Por padrão a GMapEasy mostra o ícone de nome “marcador.png”.

Como seria um exemplo em PHP?

A primeira coisa a ser feita é criar os ícones dos marcadores. É necessário a criação de 3 ícones: 1) o ícone principal, que é mostrado inicialmente no mapa; 2) o ícone da sombra; e 3) o ícone para o evento mouseOver. Você também pode criar ícones específicos para aplicar a determinados pontos, para isso adicione o nome do ícone a propriedade “[icone]“, conforme explicado logo acima. Os ícones para o exemplo são:

marcador.png

marcador_shadow.png

marcador_over.png

Crie o vetor em PHP. Nesse exemplo vamos utilizar 2 pontos com o GeoCoder:

$arPontos = array(0 => array('logradouro' => 'Av T vinte e oito', 'numero' => '200', 'bairro' => 'Setor Bueno',
							 'localidade' => 'Goiania', 'CEP' => '74210-040',
							 'str_html' => '<div style="width:200px; background-color: #efefef; border: 1px solid black; padding:5px;">
							 				Teste para Tooltip. Pode ser inserido qualquer tipo de texto ou HTML (incluindo imagens). Permitido o uso de CSS n&amp;amp;amp;amp;amp;amp;amp;atilde;o inline.
											</div>',
							 'link' => 'http://www.rodrigopadua.com.br'),
				  1 => array('logradouro' => 'Av T cinco', 'numero' => '500', 'bairro' => 'Setor Bueno',
							 'localidade' => 'Goiania', 'CEP' => '74210-030',
							 'str_html' => '<div style="width:200px; background-color: #efefef; border: 1px solid black; padding:5px;">
							 				Teste para Tooltip. Pode ser inserido qualquer tipo de texto ou HTML (incluindo imagens). Permitido o uso de CSS n&amp;amp;amp;amp;amp;amp;amp;atilde;o inline.
											</div>',
							 'link' => 'http://www.rodrigopadua.com.br')
);

Gere a string JSON desse vetor, dessa forma atribuimos o resultado a variável javascript tornando-a um vetor javascript, idêntico ao vetor escrito em PHP. Utilize qualquer lib PHP-JSON para codificar o código:

$json = new Services_JSON();
$strJsonPontos = $json->encode($arPontos);

Crie o container em seu HTML onde deverá ser mostrado o mapa:

<body>...
<div id="GMapEasy-sample" style="width:500px; height:400px;"></div>
...</body>

Adicione em sua página o javascript que instacia a GMapEasy e atribua a string JSON ao “option” arGeoCoder:

<script type="text/javascript">
document.observe('dom:loaded', function() {
	GMapE = new GMapEasy('GMapEasy-sample', {
					arGeoCoder: <?php echo($strJsonPontos);?>,
					cNavegacaoCompleto: true,
					cTipoMapa: true
				});
});
</script>

Resultado:

Resultado

É isso. Crie o vetor respeitando os nomes dos índices, codifique para JSON e crie uma instância da GMapEasy.

Você pode conferir um exemplo em:
http://www.rodrigopadua.com.br/exemplos/gmapeasy-basico/

Clique aqui para fazer o **DOWNLOAD** da última versão da GMapEasy.

Requisitos:
1. Prototype
2. Scriptaculous

O framework Prototype possui uma classe chamada “Responders” que possibilita através do seu método “register” identificar quando uma requisição Ajax está sendo feita.

Utilizando o método “register” não é preciso chamar uma visualização de um “container” informando que a requisição Ajax está em andamento. Essa chamada é feita de forma automática, onde a mensagem de “Aguarde, carregando…”, por exemplo, é mostrada sem trabalho extra.

A mensagem de “loading” é mostrada até que a última requisição seja concluída.

Chamei essa lib de Protoloading. Para utiliza-la basta relacionar o .js da lib ao documento a ser observado (conforme mostrado abaixo), sem que você precise escrever códigos adicionais.

<script type="text/javascript" src="../js/protoloading.js"></script>

Você pode conferir um exemplo em:
http://www.rodrigopadua.com.br/exemplos/protoloading/

Clique aqui para fazer o **DOWNLOAD** da última versão da Protoloading.