Traçar rota do endereço mais próximo com a API do Google Maps
novembro 9, 2009
Fala amigos, estive precisando de um script que traçava a rota do endereço (previamente marcado) mais próximo com o endereço que eu digitei.
Eu encontrei um script no blog andafter.org e melhorei ele, segue o script:
observação: A distância que a API utiliza para calcular é uma distância reta do ponto A para o ponto B. Se você quer saber a distância da rota, deverá utilizar o método getDistance(). Se eu ver que muita gente precisará disso eu criarei um post ensinando como faz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Endereço mais próximo utilizando a API do Google Maps | Por Lucas Martins</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh-4-WXT7vryB4zWcSDKIThSuBLcACnbYAIBxS9eHfruCpUv1BBRZi-GSNoVlnTofbgShokT-TgG8BA" type="text/javascript"></script>
<script type="text/javascript">
/*
variáves globais / globals vars
*/
var geocoder = new GClientGeocoder();
var map;
var directionsPanel;
var directions;
var gdir = new GDirections();
var addr = new Array(3);
var distances = new Array(3);
// Ao carregar / After load
window.onload = function() {
// Seta o país que será usado na API / Set the country that will be used in the API
geocoder.setBaseCountryCode("pt_BR");
map = new GMap2(document.getElementById('map'), { size: new GSize(710,480) })
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(-23.547779, -46.639366), 12); // São Paulo / Sao Paulo (brazilian city)
// Adiciona marcação dos endereços das bibliotecas públicas de São Paulo / Add marks of addresses of public libraries in Sao Paulo
showAddress("Rua Cisplatina, 505 - Ipiranga, São Paulo - SP, 04211-040", 1);
showAddress("Rua Arsênio Tavolieri, 45 - Jabaquara, São Paulo - SP, 04321-030", 2);
showAddress("Rua Sena Madureira, 298 - Vila Mariana, São Paulo - SP, 04021-050", 3);
// No clique do botão / On click of button
document.getElementById("trace_route").onclick = function() {
// Verifica o endereço digitado pelo usuário / Check the address entered by the User
geocoder.getLocations(
document.getElementById("myAddress").value,
function(point) {
// Verifica se o endereço que o usuário digitou é válido e existente / Check if the address that the user entered is valid and existing
if(point.Placemark) {
// Cria o objeto GLatLng e grava a latitude e longitude do endereço digitado pelo usuário
// Creates the GLatLng object and records the latitude and longitude of the address entered by the User
var a = new GLatLng(point.Placemark[0].Point.coordinates[1], point.Placemark[0].Point.coordinates[0]);
/*
usa método da classe GLatLng() que retorna a distância, em metros, entre
duas coordenadas de latitude/longitude
use method of the GLatLng() which returns the distance in meters between
two latitude / longitude
*/
var b = new GLatLng(addr[0][1], addr[0][0]); // inicia no primeiro ponto / start in the first point
var x = b.distanceFrom(a);
/*
variáveis que serão usadas para comparar distâncias entre coordenadas
de latitude e longitude
variables that will be used to compare distances between coordinates
latitude and longitude
*/
var smallestDist = x;
var smallestDistId = 0;
//
for(var i = 0; i < 3; i++) {
b = new GLatLng(addr[i][1], addr[i][0]);
x = b.distanceFrom(a);
// Verifica qual dos endereços tem menor distância entre um ponto e outro
// Check It addresses which is less distance between one point and another
if(x < smallestDist || i == 0) {
smallestDist = x;
smallestDistId = i;
}
}
/*
cria um array de dois objetos GLatLng, com as coordenadas do endereço digitado pelo
usuário e o endereço do ponto mais próximo a esse endereço
creates an array of two GLatLng objects, with the coordinates of the address entered by
User and address of the nearest point to this address
*/
var pointsArray = [a, new GLatLng(addr[smallestDistId][1], addr[smallestDistId][0])]
directions = new GDirections(map); // instancia objetos / instance objects
// usa o array de pontos para traçar a rota entre os dois endereços / uses the array of points to trace the route between two addresses
directions.loadFromWaypoints(pointsArray, {"locale":"pt_BR"});
}
}
);
}
}
/*
função que será usada para manipular endereços
function that will be used to manipulate addresses
*/
function showAddress(address, k) {
geocoder.getLocations(
address,
function(point) {
addMarker(point, k);
}
);
}
/*
função que será usada para marcar o mapa
function that will be used to mark the map
*/
function addMarker(response, k) {
if(!response.Placemark) { return; }
place = response.Placemark[0];
if(k) {
// salva a latitude/longitude do endereço / save the latitute/longitude of address
addr[k-1] = place.Point.coordinates;
}
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
var marker = createMarker(point, place.address, k); // cria o marcador no mapa / creates the marker on the map
map.addOverlay(marker); // adiciona o marcador no mapa / adds the marker on the map
}
/*
função que será usada para criar os marcadores
function that will be used for creating markers
*/
function createMarker(point,html, k) {
var marker = new GMarker(point, false);
return marker;
}
</script>
</head>
<body>
<form action="#" method="POST">
<fieldset>
<label for="from">Seu endereço:</label>
<input type="text" name="myAddress" id="myAddress" />
</fieldset>
<input type="button" class="button" id="trace_route" value="Encontrar biblioteca próxima" />
</form>
<div id="map"></div>
</body>
</html>
Com algumas modificações desse código você também poderá obter todos os locais num raio de 100 metros de um endereço digitado. Ou um monte de outras situações.
Abraços!
PHP + JSON
novembro 9, 2009
A partir do PHP 5.2.0 temos uma extensão para JSON que facilita o transporte de dados do PHP para o JavaScript (via AJAX) e vice-versa.
Com o advento do Ajax, JSON se tornou um formato para intercâmbio de dados bem mais eficiente e compacto que XML. E nada como tratá-lo como um objeto também no lado do servidor, assim como fazemos no JavaScript. As duas funções que tratam da conversão objeto-string e string-objeto no PHP são json_encode e json_decode, respectivamente.
Vou lhes mostrar um exemplo de como trabalhar com PHP + JSON. Primeiramente vamos formatar corretamente o código PHP que será chamado via AJAX no Javascript.
<?php
$produto = array(
'id' => 32,
'nome' => 'Camera Digital Sony W220',
'fabricante' => 'Sony',
'valor' => 'R$ 799,00'
);
$produtoJSON = "var produto = " . json_encode($produto);
echo $produtoJSON;
// var produto = {"id": 32, "nome": "Camera Digital Sony W220", "fabricante": "Sony", "valor": "R$ 799,00"}
?>
Agora no javascript vamos dar um alerta com os dados separados:
<script type="text/javascript">
/*
... requisição ajax ...
*/
eval(ajax.responseText); // transformo a string do resultado em formato de código válido do javascript
alert(" id = " + produto['id'] + "\n nome = " + unescape(produto['nome']) + "\n fabricante = " + unescape(produto['fabricante']) + "\n valor = " + unescape(produto['valor']));
</script>
Como buscar informações detalhadas de um endereço como a Latitude e Longitude com a API do Google Maps
outubro 20, 2009
Este é um exemplo de extração de dados da geocodificação utilizando a API do Google Maps
Fala galerá, esta API do Google Maps é muito boa quando você precisa trabalhar com mapas, endereços, ceps, etc. Vou mostrar para vocês um exemplo de código que traz informações detalhadas sobre um endereço.
Vou utilizar como exemplo o endereço:
Rua Vergueiro, 1000 (é o endereço do Centro Cultural de São Paulo que fica na Vergueiro)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Buscar Informações detalhadas do endereço</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh-4-WXT7vryB4zWcSDKIThSuBLcACnbYAIBxS9eHfruCpUv1BBRZi-GSNoVlnTofbgShokT-TgG8BA” type=”text/javascript”></script>
<script type=”text/javascript”>
var map = null;
var geocoder = null;function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(“mapa”));
map.setCenter(new GLatLng(34, 0), 1);
geocoder = new GClientGeocoder();
}
}function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + ” não encontrado”);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}// addAddressToMap() é chamado quando o geocoder retorna uma
// resposta. Ele adiciona um marcador no mapa com uma janela aberta
// mostrando uma boa formatação do endereço, o código do país, latitude, longitude e o CEP.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert(“Desculpe, não fomos capazes de geocodificar o endereço”);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + ‘<br>’ +
‘<b>Código do páis:</b> ‘ + place.AddressDetails.Country.CountryNameCode + ‘<br>’ +
‘<b>Latitude:</b>’ + place.Point.coordinates[1] + ‘<br>’ +
‘<b>Longitude:</b>’ + place.Point.coordinates[0] + ‘<br>’ +
‘<b>CEP:</b>’ + place.AddressDetails.Country.AdministrativeArea.Locality.PostalCode.PostalCodeNumber);
map.setCenter(point, 13);
}
}// showLocation() é chamado quando você clica no botão de buscar
// no formulario.
function showLocation() {
var address = document.getElementById(‘address’).value;
geocoder.getLocations(address, addAddressToMap);
}
</script>
</head><body onload=”initialize()” onunload=”GUnload()”>
<form action=”#” onsubmit=”showLocation(); return false”>
<p>
<input type=”text” size=”60″ name=”address” id=”address” value=”Rua Vergueiro, 1000″ />
<input type=”submit” value=”Go!” />
</p>
<div id=”mapa” style=”width: 500px; height: 300px”></div>
</form>
</body>
</html>
Foi testado e está funcionando, você só precisa trocar a key de uso da API do Google Maps acessando este link: http://code.google.com/intl/pt-BR/apis/maps/signup.html
Para mais detalhes deste recurso da API do Google Maps, veja este link:
http://code.google.com/intl/pt-BR/apis/maps/documentation/services.html#Geocoding_Structured
Abraços!
AJAX para inicantes: Como estanciar o XMLHttpRequest
setembro 30, 2009
Vou começar a partir de hoje, uma mini-aula para os interessados neste assunto que vem revolucionando a maneira de se navegar na web.
Sempre, mas sempre mesmo que formos criar um AJAX qualquer, precisaremos estanciar o XMLHttpRequest.
Então para começar a mini-aula, vamos criar esse arquivo, que usaremos em todos os tutoriais sobre AJAX, e você também pode estar guardando para usar nas suas aplicações.
1. Crie um arquivo JavaScript com um nome qualquer, para você guardar na sua biblioteca. Porquê sempre que você for usar AJAX, você só precisa importar esse js na página. Eu vou chamá-lo de ajax.js
2. Neste arquivo que você acabou de criar, escreva o seguinte código:
function Ajax() {
var ajax;
try {
// Mozila, Opera 5+
ajax = new XMLHttpRequest();
} catch(ee) {
try {
// Internet Explorer 6+
ajax = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try {
// Internet Explorer 5.5-
ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(E) {
// Se nenhuma das tentativas for válidas, ajax é falso para este browser.
ajax = false;
}
}
}
// Retorna o valor do ajax
return ajax;
}
É simples, a variavel “ajax” está estanciando um objeto na qual os browsers identificam o XMLHttpRequest (Requisição pelo protocolo Http usando Extensible Markup Language)
Agora vamos tomar um café!
Até a próxima.
O que é Ajax?
setembro 30, 2009
AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é um modo de programar popularmente reconhecido em 2005 por Google (com Google Suggest). Foi criado em 2001 pela Microsoft.
AJAX não é uma nova linguagem de programação, mas é o conjunto de tecnologias compatíveis com navegadores, para tornar as aplicações mais rápidas, interativas e criativas, utilizando requisições de um modo assíncrono.
O AJAX é baseado em:
- Apresentação baseada em padrões, usando XHTML e CSS;
- Exposição e interação dinâmica usando o DOM;
- Intercâmbio e manipulação de dados usando XML e XSLT ou JSON;
- Requisições assíncrona de dados usando o objeto XMLHttpRequest;
- e JavaScript unindo todas elas em conjunto.
Veja como funciona o fluxo de uma aplicação web utilizando AJAX:
O importante agora, é ressaltar que, o JavaScript é o elemento mais importante deste grupo de tecnologias na hora de construir seu AJAX. Muitas pessoas acham que mesmo não sabendo programar JavaScript, conseguirão fazer qualquer coisa com AJAX. Isso não é verdade!
Então quem diz que sabe programar em AJAX e não entende bulhufas de JavaScript, é um verdadeiro implementador de frameworks ou copiador de códigos. Se for este o seu caso, prefira não dizer que “programa” AJAX.
Mas fique tranquilo, quanto a saber ou não “programar” AJAX. Fique atento no blog W3G para conseguir os melhores tutoriais e dicas para o uso desta tão poderosa tecnologia.
Até mais!
Lucas Martins
klsinformatica
