Entendendo um pouco a API Google Maps
O Google dispensa comentários com todas as inovações que ele faz. Hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google. Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.
Como começar
A primeira coisa que devemos fazer é acessar o link da página inicial da API, ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)
Figura 1: Aceitando o contrato
Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)
Figura 2: Chave gerada
Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..
Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=SUA_CHAVE" type="text/javascript">
</script>O código de base para começar o aprendizado está abaixo:
<!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>
<title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&
key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"
type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function inicializa() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapa_base"));
map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);
geocoder = new GClientGeocoder();
}
}
</script>
</head>
<body onload="inicializa()" onunload="GUnload()">
<div id="mapa_base" style="width: 500px; height: 300px"></div>
</body>
</html>Este código não está difÃcil de entender, explicaremos as partes mais importantes:
- No onload(), a função inicializa() verifica se o navegador do usuário é compatÃvel com a API Google Maps, caso positivo, o método captura uma div com id igual a “mapa_base” e define o mapa centralizado. O local padrão que escolhi foi a cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13, representa o zoom no mapa, quanto menor esse número, menor o zoom.
- No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.
Para mais informações sobre os métodos, acesse a documentação em português, através deste link. Essa documentação está interessante, e será a base para o artigo.
Exemplos simples
Neste link podemos analisar diversos exemplos do poder desta API.
Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.
- Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:
function mostraEndereco(){
        var endereco = document.getElementById("endereco").value;
        if ( geocoder ) {
            geocoder.getLatLng(endereco,
                function(point){
                    if ( !point ) {
                        alert(endereco + " não encontrado");
                    } else {
                        map.setCenter(point, 13);
                        var marca = new GMarker(point);
                        map.addOverlay(marca);
                        marca.openInfoWindowHtml( endereco + "<br />" + point.toString() );
                    }
                }
            );
        } else {
            alert("GeoCoder não identificado");
        }
}
E no HTML:
<form id="form_mapa" action="#" method="get">
   <input type="text" name="endereco" id="endereco" size="50" value="São Paulo" />
   <input type="button" name="enviar" id="enviar" value="Mostrar Latitude/Longitude" onclick="mostraEndereco()"/>
</form>- Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida. Devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.
GEvent.addListener(marca, "click", function() {
      marca.openInfoWindowHtml( endereco + "<br />" + point.toString() );
   });- Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é esta:
map.addControl( new GSmallMapControl() );- Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, hÃbrido ou satélite. Para isso devemos seguir a mesma linha de raciocÃnio para inserir o zoom, que seria adicionar um controle.
map.addControl( new GMapTypeControl() );Exemplo avançado
Para mostrar algo avançado, que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.
<!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>
      <title>Aprendendo a Usar a API Google Maps - Obter Rota | Paulo Fernandes </title>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
   <script
src="http://maps.google.com/maps?file=api&v=2&sensor=true&
key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"
type="text/javascript"></script>
      <script type="text/javascript">
         var map = null;
         var geocoder = null;
         var from;
         var to;
         var directionsPanel = null;
         var directions = null;
         function inicializa() {
            if (GBrowserIsCompatible()) {
               map = new GMap2(document.getElementById("mapa_base"));
               map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7);
               geocoder = new GClientGeocoder();
               map.addControl( new GSmallMapControl() );
               map.addControl( new GMapTypeControl() );
               directionsPanel = document.getElementById("route");
               directions = new GDirections(map, directionsPanel);
             }
         }
         function gerarRota(){
            from = document.getElementById("partida").value;
            to = document.getElementById("destino").value;
            if ( geocoder ) {
               geocoder.getLatLng(from,
                  function(point){
                     if ( !point ) {
                        alert(from + " não encontrado");
                     }
                  }
               );
               geocoder.getLatLng(to,
                  function(point){
                     if ( !point ) {
                        alert(to + " não encontrado");
                     }
                  }
               );
               var string = "from: " + from + " to: "+to;
               directions.clear();
               directions.load(string);
               GEvent.addListener(directions, "error", erroGetRoute);
            } else {
               alert("GeoCoder não identificado");
            }
         }
         function erroGetRoute(){
            alert("Não foi possivel traçar a rota de: " + from + " para: " + to );
         }
   </script>
   </head>
   <body onload="inicializa()" onunload="GUnload()">
      <form id="form_mapa" action="#" method="get">
         <label for="partida">Partida</label>
         <input type="text" name="partida" id="partida" value="São Paulo" size="50" />
         <br />
         <label for="destino">Destino</label>
         <input type="text" name="destino" id="destino" value="Rio de Janeiro" size="50" />
         <br />
         <input type="button" name="enviar" id="enviar" value="Obter Rota" onclick="gerarRota()"/>
      </form>
      <div id="mapa_base" style="width: 800px; height: 500px;"></div>
      <div id="route" style="width: 300px; height: 500px; position: absolute; right: 0; top: 0;"></div>
   </body>
</html>Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feita nesta linha directionsPanel = document.getElementById(“route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);
No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro, por exemplo.
Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.
Conclusão
Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.
Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se a tivemos declarado fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.
Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.
Fonte: Imasters
Google Quality Score – conheça o segredo por trás do leilão do Google AdWords
Falando sobre o SMX Advanced, resolvi escrever sobre um dos principais temas discutidos em qualquer evento de Search Marketing (SEM) – o Quality Score do Google AdWords. Se você usa o Google AdWords para qualquer campanha de marketing (ou tem uma agência que faz isso por você), conhecer o que está por trás do leilão do Google e como o preço pago por cada clique é determinado é fundamental.
Primeiro, uma breve explicação sobre como se determina a ordem dos anúncios exibidos nas páginas de buscas do Google (se isso é básico demais para você , pule para o próximo parágrafo). O Google sempre está preocupado em balancear três participantes do sistema de buscas – anunciante, usuário e o próprio Google. Nos primeiros sistemas de leilão de posições de anúncios em buscadores, o único critério que determinava a ordem dos anúncios era o lance de cada um. Ficava em primeiro quem fazia a melhor oferta. O problema desse modelo é que o anúncio poderia ser totalmente insignificante para o usuário que fez a busca. A grande inovação do Google foi criar um Ãndice de qualidade para os anúncios, o chamado Quality Score. No Google AdWords, então, além do lance de cada anunciante, a qualidade do anúncio é levada em consideração para decidir a ordem dos anúncios e o preço a ser pago também.
Mas no que consiste o Quality Score? Essa é a resposta que o Google nunca revela, porém o que eles indicam é que são basicamente três fatores, com pesos desproporcionais. O primeiro e mais importante é a taxa de clique ou CTR (click-through rate), o segundo é a relevância do anúncio (aqui diversas variáveis contam, mas todas ligadas à linguagem do anúncio e à palavra buscada) e o terceiro é a página de destino (ou landing page). Da composição destes três fatores é atribuÃdo um Quality Score ao grupo anúncio/palavra-chave.
E como se determina a ordem dos anúncios e o valor a ser pago? A ordem dos anúncios a serem exibidos é determinada pelo Ad Rank (multiplicação do lance pelo Quality Score). Primeiro calcula-se o Ad Rank de cada anúncio e se ordena do maior para o menor.
E, finalmente, o valor a ser pago por cada anunciante: existe uma matemática bem simples por trás desta conta – o preço pago pelo anunciante que ficou em primeiro na ordem dos Ad Ranks é igual ao Ad Rank do segundo colocado (30 no exemplo abaixo), dividido pelo seu Quality Score (8 no exemplo abaixo) e assim por diante. Exemplo:
Dessa forma, o incentivo é para que cada anunciante ofereça o lance máximo que realmente está disposto a pagar, pois ele não será penalizado caso os outros anunciantes estejam oferecendo valores menores, já que o valor real que pagará depende do valor oferecido pelo próximo anunciante. Além disso, um fator muito relevante é que, quanto maior o Quality Score, menor será o preço efetivo pago, portanto, sempre valerá a pena tentar melhorá-lo.
Para mais detalhes sobre como funciona o leilão do Google AdWords, recomendo este vÃdeo feito pelo Hal Varian, Chief Economist do Google: http://www.youtube.com/watch?v=K7l0a2PVhPQ.
Vale a pena também assistir o vÃdeo do presidente da ClickEquations, Craig Danuloff, em uma das palestras durante o SMX Advanced:.  http://www.midiadigital.com.br/blog/sem/google-quality-score-under-a-microscope/.
Créditos para Guilherme Gomide, que filmou e editou essa palestra.
Espero que vocês tenham aproveitado as novidades discutidas no SMX Advanced e trazidas pelo MMOnline. Caso queiram mais informações sobre o evento ou sobre os artigos escritos, fiquem à vontade para me mandarem emails (rgrosman@fbiz.com.br) ou seguirem-me no Twitter (http://twitter.com/rgrosman).
Fonte: Imasters
O que é o Google Wave?
O Google anunciou, na sexta passada, uma ideia nova e experimental para modificar o futuro da comunicação na Web. O nome é Wave (“Onda”) e, se você acreditar no seu desenvolvedor, é “o que o email seria se fosse inventado hoje”. Além disso, vai ser totalmente open source. Já está intrigado?
Primariamente, o Wave tem como objetivo melhorar a comunicação em tempo real na web. Aqui tem um vÃdeo de quase hora e meia com a apresentação completa aos desenvolvedores na conferência Google I/O, mas se você não quiser ou não tiver tempo de ver, fique com os detalhes diretamente da boca do Google:
O QUE É UMA WAVE?
Uma wave é conversação e documento em partes iguais. As pessoas podem se comunicar e trabalharem juntos com texto formatado, imagens, vÃdeos, mapas e mais.
Uma wave é compartilhada. Qualquer participante pode responder em qualquer ponto da mensagem, editar o seu conteúdo e adicionar participantes em qualquer ponto do processo. A função Playback permite que qualquer um retroceda a Wave passo a passo desde o inÃcio, para ver quem disse o quê e quando.
Uma wave é viva. Com a transmissão instantânea à medida que você digita, os participantes de uma wave podem ter conversações mais rápidas, ver edições e interagir com extensões em tempo real.
Bastante amplo, né? O Google Wave é claramente algo que precisaremos ver em ação, usar mesmo, antes de entender completamente como funciona. Da mesma forma que o email, o Wave foi desenvolvido como um padrão que poderá ser rodado a partir de qualquer servidor, então ele não vai pertencer ao Google. Qualquer um vai poder ter o seu próprio Wave, e este Wave pode competir com o do Google ou se comportar como o dono quiser. Mas, sendo criado sobre um protocolo padrão, Waves diferentes podem entender e se comunicar entre si, da mesma forma que o Outlook pode trocar emails normalmente com um Thunderbird, GMail ou Yahoo Mail.
Isso resolve um problema que eu (e muitos outros bem mais inteligentes que eu) sempre tive com o Twitter: ele vive nos servidores de uma empresa, e a sua informação está suscetÃvel ao que quer que a empresa queira fazer com ela. RSS, email e mensagens instantâneas trabalham com protocolos padrões que podem ser utilizados por qualquer um. É o exemplo dos emails que eu dei acima.
O blog TechCrunch fez uma análise bem detalhada do Wave (link lá no fim, em inglês) e dos rumos que o Google tomou com ele até agora. O Wave ainda é incrivelmente novo e pouco desenvolvido, mas também é muito intrigante sob o ponto de vista do Futuro-da-Internet e coisa assim. Pode não dar em nada, mas considerando as reações que teve e a popularidade de serviços como o Twitter e o Facebook, a ideia de um protocolo que transforma uma comunicação deste tipo em padrão aberto soa muito promissora.
O Wave não está disponÃvel de nenhuma forma para mim e para você por enquanto, e muito da tecnologia por trás dele depende das atualizações do HTML 5, que não estarão disponÃveis pelo menos por mais um pouco de tempo, mas no site oficial você pode se inscrever para atualizações do Google Wave se estiver ansioso por toda e qualquer novidade do desenvolvimento. (N.T.: Eu mais do que certamente estou.)
Fonte: Imasters
Google Charts API
O Google Charts API é uma ferramenta muito útil e interessante para quem desenvolve aplicações web e quer gerar gráficos de uma forma dinâmica. Esta API caracteriza-se pela facilidade de utilização e implementação, não sendo necessária a instalação de qualquer software ou frameworks. Para a sua utilização, basta o URL da API no qual serão referenciados os dados e caracterÃsticas necessários para gerar o gráfico pretendido. Para começar inserimos o seguinte URL no browser:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40,30&chs=260×110&chl=Ligeiros|Motas|Pesados
Podemos ver no exemplo que foi gerado um gráfico tipo “queijo” com a percentagem de Mulheres e Homens.
Como resposta ao URL e parâmetros nele inseridos, a API gerou uma imagem PNG. Podem ser gerados outros tipos de gráficos, com diversas cores e outros atributos, é isso que iremos ver a seguir.
Formato do URL
Os parâmetros estão separados por “&”. Podem ser especificados quantos parâmetros se desejarem e pretenderem.
http://chart.apis.google.com/chart? ? Localização da Chart API
cht=p3 ? Tipo de gráfico
chd=t: 60,40,30 ? Valores do gráfico
chs=260x110 ? Dimensões do gráfico (em pixels)
chl= Ligeiros|Motas|Pesados ? Referências do gráfico (r
Claro que a utilização deste API não se resume à aplicação em URLs. Uma vez que é gerada uma imagem, é essa mesma imagem que será utilizada no layout de uma aplicação ou site. Para isso deveremos inserir a URL pretendida numa tag de imagem, como se fosse um arquivo *.jpg, *.gif ou *.png.
Seguindo o exemplo anterior, deveremos colocar a URL da seguinte forma:
<img src="http://chart.apis.google.com/chart?
chs=260x110
&chd=t: 60,40,30
&cht=p3
&chl= Ligeiros|Motas|Pesados "
alt="Sample chart" />Em alguns casos (repare no exemplo) será necessária a utilização da referência & no lugar de “&” quando inserido na tag <img>.
Utilização de valores de bases de dados
Para aplicar um pouco mais de dinamismo aos gráficos e mais precisamente aos dados que ele representa, o Google Charts pode ser utilizado com valores de uma tabela de base de dados.
Suponhamos que tem uma tabela com entradas no site:
SELECT count(*) FROM entradas WHERE entradas.mes=\\'3\\'Então os valores ficariam na forma:
&chd=t: <?php echo $row_rsVAL1[\\'count(*)\\']; ?>,
<?php
echo $row_rsVAL2[\\'count(*)\\']; ?>, <?php echo $row_rsVAL3[\\'count(*)\\'];
?>
Fonte: Imasters
Google Earth no meu site
O que o Google diz sobre isto?
O plug-in do Google Earth e a API JavaScript permitem incorporar o Google Earth, um verdadeiro globo digital em 3D, nas suas páginas da web. Usando a API, você pode desenhar marcadores e linhas, dispor imagens sobre a área, adicionar modelos em 3D ou carregar arquivos KML, permitindo criar aplicativos sofisticados para mapas em 3D. Se você tem um site de API do Google Maps, pode ativar 3D em sua página com uma única linha de código.
Ótimo, podemos utilizar a API do Google Maps! Vamos ver então um exemplo simples da API do Google Earth e vamos também utilizar o nosso exemplo do artigo anterior (Colocando minha empresa no mapa), onde utilizamos a API do Google Maps, para incluir um novo Servidor de Mapas que será o Google Earth.
Bom, aconselho você ler o artigo anterior antes de seguir, pois necessitamos obter uma chave de segurança da API do Google para utilizá-la neste exemplo. Segue o link (Obtendo uma Chave de API).
Vamos ao Hello, Earth!
Obtendo o Pluggin para rodar o Google Earth no seu browser
Não adianta você ter instalado o Google Earth na sua máquina. Você precisa de um plugin especÃfico para rodar esta API no seu browser.
Para instalar, acesso o link http://code.google.com/apis/earth/ e clique no mapa para baixar o plugin.
Instale o plugin na sua máquina e pronto. Você já pode rodar o Google Earth no seu browser.
Vamos ao código:
<html>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <head>
  <title>Hello Google Earth!</title>
    <!-- Adicionando a API (!!Não esqueça de alterar a sua chave!!)-->
  <script src="http://www.google.com/jsapi?key=SUA_CHAVE_AQUI"></script>
  <script>
    google.load("earth", "1");
    var ge = null;
    // Função Inincial -> Chamada no OnLoad
    function init() {
     // Instancia o Objeto dentro da DIV map3d,
     // caso sucesso, chama a função initCallback, senão, failureCallback
     google.earth.createInstance("map3d", initCallback, failureCallback);
    }
    function initCallback(object) {
     ge = object; //Adiciona o Objeto na variável global ge
     //Dá visibilidade ao Google Earth dentro do navegador.
     ge.getWindow().setVisibility(true);
    }
    function failureCallback(object) { }
  </script>
 </head>
 <body onload='init()' id='body'>
  <center>
   <div id='map3d_container'
      style='border: 1px solid silver; height: 600px; width: 800px;'>
    <div id='map3d' style='height: 100%;'></div>
   </div>
  </center>
 </body>
</html>Resultado
Pronto, temos apenas um Hello World acima, uma visão do globo geral.
Para visualizar um exemplo de como adicionar controles de navegação, escala, grid, mapa de referência, etc, acesse este link: http://earth-api-samples.googlecode.com/svn/trunk/demos/options/index.html.
É muito simples ampliar as ferramentas do seu mapa.
Integrando o Google Earth API no Google Maps API
Ok, vamos pegar o nosso exemplo do artigo anterior e integrar com o a API Google Earth.
Lembram do código?
Resultado
Alterando o código
- Alteramos as linhas 8,9,10: trocamos a API do Google Maps pela API do Google Earth
- Linha 14: Adicionado o Load da API do Google Maps
- Linha 23: Adicionado o Layer do Google Earth
- Linha 27: Adicionado os controles de layers
Como ficou
Não se esqueça, acesse o site dos desenvolvedores, http://code.google.com/intl/pt-BR/apis/earth/, e visualize os exemplos e as referências das APIs do Google Maps e Google Earth. Apenas com os exemplos disponibilizados pelo Google você aumenta a qualidade do seu site sem muito esforço.
Fonte: Imasters
Colocando minha empresa no mapa…
Este artigo, por mais simples que seja, tende a ser uma das maiores dúvidas e desejos dos usuários que estão iniciando nesta área. Como colocar minha empresa, estabelecimento, casa etc., no mapa. Com certeza no seu site é muito importante existir além do endereço da sua empresa um pequeno mapa representando tudo que está em volta dela para que os usuários possam se localizar mais facilmente.
Nosso foco hoje é criar um mapa utilizando a API do Google Maps. Com isso, não precisamos de nenhum banco de dados geográfico ou qualquer outro tipo de aplicação para desenvolvimento de mapas além das linguagens HTML e JavaScript.
Segundo o próprio Google, o que é a API do Google Maps?
A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página da web. A API fornece diversos utilitários para manipular mapas (como na página http://maps.google.com) e adicionar conteúdo ao mapa através de diversos serviços. Você pode criar aplicativos de mapas robustos em seu site.
Passo 1: Obtendo uma chave para a API do Google Maps.
Para utilizarmos a API do Google, precisamos obter uma chave de identificação para o nosso site. É muito importante que você coloque a URL correta do caminho onde estará o mapa, caso contrário, ao instanciar a API no seu código, ela não funcionará.
Acesse o link : http://code.google.com/intl/pt-BR/apis/maps/signup.html, preencha as informações da URL do seu site e clique em GERAR chave de API. Não se esqueça de ler os termos de uso da API, nada de utilizá-la dentro de intranets.
Obs.: Você precisa ter um usuário cadastrado no Google para obtê-la.
Pronto, chave gerada, podemos ir para o próximo passo.
Passo 2: Obtendo o XY da sua empresa
Inicialmente, para identificarmos a sua empresa/estabelecimento/etc no mapa, precisamos da localização correta dela. A localização que comento é com relação ao seu XY. Mas o que é XY? Vamos à matemática…
Para a construção do modelo da superfÃcie topográfica de uma dada região, necessitamos das triplas (x, y, z) de uma série de pontos da superfÃcie do terreno. Os valores (x, y, z) são as coordenadas cartesianas de um ponto P, relativas a um sistema de coordenadas preestabelecido (como já vimos em meu outro artigo Sistemas de Informação Geográfica).
O plano XY é o plano horizontal de referência relativamente ao nÃvel médio dos mares, e z é a distância vertical do ponto P ao plano horizontal XY (se me permitem exemplificar desta maneira, seria a altura em relação ao nÃvel do mar, no nosso caso, não será necessária).
Como posso obter este ponto?
Existem diversas maneiras de se obter o XY de um endereço, vou exemplificar duas: a primeira é suscetÃvel a alguns erros, motivo pelo qual o mapeamento da numeração das ruas nas cidades do Brasil não ser de fato correto (mas confesso que é satisfatório). O que quero dizer é que muitas vezes quando você informa o seu endereço, por exemplo o número 567, seriam 567 metros do ponto inicial da sua rua, nem sempre esta numeração irá bater exatamente no local da sua casa (quando digo exatamente, ainda considero um erro de 50m). Pode acontecer de aparecer na quadra errada; quando ocorrer, sugiro utilizar o segundo exemplo de aquisição do XY.
A primeira maneira que me refiro é solicitar através da url http://maps.google.com/maps/geo?q=STRING+DO+ENDERECOoutput=xmlkey=SUA_CHAVE
Obs.: Separe a string com “+”.
Exemplo:
http://maps.google.com/maps/geo?q=avenidaipiranga1200portoalegrersbrasiloutput=xmlkey=
Exemplo da resposta (response) em XML:
Pronto, seu XYZ é a coordenada <coordinates>-51.2093204,-30.0451247,0</coordinates> .
Agora você pode pular o segundo exemplo e ir direto ao passo 3, mas antes vamos verificar se o ponto está mesmo no local correto.
Acesso o seguinte link:
http://maps.google.com.br/maps?f=qsource=s_qhl=pt-BRgeocode=q=(-30.0451247,-51.2093204)
OBS: Lembre-se de alterar a ordem dos pontos XY <-> YX
A segunda maneira de se obter as coordenadas XY é implementar um outro exemplo utilizando a API do Google Maps. Chamamos este exemplo de Geocode Reverso (através de um clique no mapa iremos obter as informações quanto a este local).
O exemplo abaixo está presente na página da API do Google Maps, mantive-o como o qual para explicar cada linha.
Código
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Reverse Geocoder</title>
<script src="http://maps.google.com/maps?file=apiv=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
var address;
function initialize() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-30.0270583,-51.2303402), 10);
map.addControl(new GLargeMapControl);
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}
function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function showAddress(response) {
map.clearOverlays();
if (!response response.Status.code != 200) {
alert("Status Code:" response.Status.code);
} 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(
'<b>orig latlng:</b>' response.name '<br/>'
'<b>latlng:</b>' place.Point.coordinates[1] "," place.Point.coordinates[0] '<br>'
'<b>Status Code:</b>' response.Status.code '<br>'
'<b>Status Request:</b>' response.Status.request '<br>'
'<b>Address:</b>' place.address '<br>'
'<b>Accuracy:</b>' place.AddressDetails.Accuracy '<br>'
'<b>Country code:</b> ' place.AddressDetails.Country.CountryNameCode);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px"></div>
</body>
</html>
Você já viu um exemplo da resposta (response) em XML no exemplo anterior.
Exemplo da resposta (response) em JSON:
Através dos arquivos acima, você consegue identificar quais as variáveis necessárias para obter os dados do geocode.
Por fim e não menos importante, o corpo do HTML:
<body onload="initialize()">
  <div id="map" style="width: 500px; height: 400px"></div>
    <div id="temp"></div>
 </body>Não se esqueça de utilizar o ONLOAD para chamar a função initialize() para tão logo carregar a página iniciar o procedimento da criação do mapa. Não quero ver ninguém comentando que o mapa não aparece!
Pronto, agora navegue no mapa, procure o endereço da sua empresa (ainda não criamos uma barra de pesquisa de endereço, nos próximos artigos irei explicar como), clique no local e copie as informações da linha latlng.
Agora temos o XY para continuar no nosso artigo.
Passo 3: Adicionando minha empresa no mapa
Bom, se você já criou o exemplo anterior do geocode reverso, este agora é muito mais simples. Caso contrário, vamos lá passo a passo.
Vamos ao código
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Markers</title>
<script src="http://maps.google.com/maps?file=apiamp;v=2amp;key=
ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
// Instância a API do Google e a adiciona na DIV map.
var map = new GMap2(document.getElementById("map"));
// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom , Zoom -, barra de Zoom, etc)
map.addControl(new GLargeMapControl);
// Padronizamos o XY de acordo com o latlng da API: (Y,X)
var latlng = new GLatLng(-30.0451247,-51.2093204);
map.addOverlay(new GMarker(latlng)); // Adiciona o marker no mapa
}//if
}//function
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
OBS: Não se esqueça de trocar a sua chave da API. Não se esqueça de declarar o ONLOAD, para que a função initialize(), no meu exemplo, crie o mapa assim que a página seja carregada.
Resultado
Caso você queira incrementar o seu mapa e adicionar um evento de clique no marker, façamos algumas modificações no código:
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Markers</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
// Instância a API do Google e a adiciona na DIV map.
var map = new GMap2(document.getElementById("map"));
// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom +, Zoom -, barra de Zoom, etc)
map.addControl(new GLargeMapControl);
// Padronizamos o XY de acordo com o latlng da API: (Y,X)
var latlng = new GLatLng(-30.0451247,-51.2093204);
var marker = new GMarker(latlng); // Criamos um marker referenciado a uma variável
// Criamos um evento para ao se clicar no marker
GEvent.addListener(marker, "click", function() {
// Abrir um InfoWindow com o seguinte texto
marker.openInfoWindowHtml("Endereço da minha empresa! <br/> <strong>;)</strong>");
});
map.addOverlay(marker); // Adiciona o marker no mapa
}//if
}//function
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Pronto!