Esta semana resolvi atualizar o meu sisteminha para visualizar a localização dos trens no celular. Vendo os exemplos da API V3 do Google Maps, tive a impressão que a transferência de dados, em relação aos mesmos exemplos da Versão 2 era bem menor. Para quem utiliza internet em um celular, nos lugares mais remotos, onde normalmente pega somente GPRS, vale a pena tentar otimizar ao máximo o código. A partir daí comecei a redesenhar o sisteminha.

A nova versão da API do Google Maps está bem diferente da V2. A começar pela sintaxe de chamada de funções e classes. Em muito lembra as chamadas do JQuery.  Quebrei um pouco a cabeça para descobrir como fazer as coisas, pois os exemplos ainda são escassos, mas consegui chegar ao resultado final. Na medida do possível, vou apresentar o código do Gmaps V3, acompanhado do mesmo código na versão 2. Mão na massa !!

Para iniciar, vamos realizar o chamado para criar o mapa básico. Na criação do mapa, desativei todas opções de menu, e eventos de drag e zoom, pois no meu caso, estas opções não funcionam no navegador do meu celular.
API V3

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.4283563, -49.2732515);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        draggable: false,
        mapTypeControl: false,
        navigationControl : false
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}

API V2

function initialize() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        var myLatlng = new GLatLng(-25.4283563, -49.2732515);
        map.setCenter(myLatlng,4);
        map.setMapType(G_NORMAL_MAP);
        map.enableScrollWheelZoom();
        map.disableDragging();
    }
}

Já podemos notar as primeiras diferenças entre as versões. Na V2, primeiro criava-se a instância do mapa, e somente depois eram setadas as opções. Na V3, já na criação é passado as opções. Também é possível ver a diferença de sintaxe entre uma e outra.

Com o mapa pronto, precisamos pegar as latitudes e longitudes dos limites do mapa. Aí que entra o map.getBounds(). Neste caso surgiu uma grande dificuldade, pois quando utilizado com o JQuery, o getBounds() não funcionava. Alguns fóruns explicam que esta função na V3 é tratada como um evento, então tem um evento que dispara quando o load da página é realizado. No meu caso, como o getBounds() está sendo chamado em uma função fora do inicialize, então não tive problemas. Para funcionamento, a variável map deverá ser declarada como global.

Para ambas as versões, o código continua o mesmo.

var bounds = map.getBounds();
var leste = bounds.getNorthEast().lng();
var oeste = bounds.getSouthWest().lng();
var sul = bounds.getSouthWest().lat();
var norte = bounds.getNorthEast().lat();

Para realizar o post, usamos um código bem simples de Ajax. Obtendo como retorno dados em JSON, vamos criar os ícones correspondentes no mapa. Mas antes, temos que centralizar o mapa, conforme a requisição de posicionamento.

API V3

var center = new google.maps.LatLng(latitude,longitude);
map.panTo(center);
map.setZoom(10);

API V2

var center = new GLatLng(latitude,longitude);
map.panTo(center);
map.setZoom(10);

As funções panTo() que é usada para mover o mapa para um novo ponto central, e o setZoom(), utilizado para setar um nível de zoom no mapa, continuam os mesmos. A mudança está no comando para gerar o ponto no mapa, podemos notar que o chamado para a criação do objeto é diferente.

Depois de centralizado o mapa no novo ponto, vamos popular o mapa com as estações existentes naquela área. Para isto vamos customizar os ícones.

API V2

var marker = new GIcon(G_DEFAULT_ICON);
marker.image = image;
marker.iconSize= new GSize(20,20);
marker.shadow = "";
marker.iconAnchor = new GPoint(1,1);
markerOptions = { icon:marker};
map.addOverlay(new GMarker(point, markerOptions));

API V3

var image = new google.maps.MarkerImage(
    json.pontos[i].icon,
    new google.maps.Size(20, 20),
    new google.maps.Point(0,0),
    new google.maps.Point(0,0)
);
var myLatLng = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
});

Para a criação de marcadores no mapa, basta instanciar a classe Marker, passando a posição, a variável do mapa e o icon por parâmetros. Não é mais necessário o addOverlay().

Com este exemplo simples, finalizei o sistema. Mas aquela duvida ainda se manteve. Realmente, o V3 é mais leve que o V2 ? Para isto, fiz o mesmo sistema na versão 2, apenas trocando as chamadas de funções que eram diferentes. Fiz o calculo de transferência utilizando o Firebug. Vejamos os resultados.

Primeira página, com um pequeno mapa do brasil, resolução 240×300

API V3 – 126,9 kb
API V2 – 264,9 kb

Para um celular, com conexão GPRS, está ótimo !!…138 kb a menos, apenas a metade do valor anterior.
Agora vamos realizar uma requisição simples, para visualizar o que se passa na estação de Ângelo Lopes.

API V3 – 56,6 kb
API V2 – 95,2 kb

A diferença pode ser mínima em matéria de transferência para o usuário final, mas para o google que deve receber milhões de conexões durante um dia, a economia de largura de banda pode ser bastante significativa.