Paulo Fernandes » Google Maps http://www.phpaulo.com.br Tecnologia, Desenvolvimento de Software, Metodologia, Web e etc.. Tue, 20 Jul 2010 20:55:59 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Colocando sua empresa no Google Maps http://www.phpaulo.com.br/utilidade/colocando-sua-empresa-no-google-maps/ http://www.phpaulo.com.br/utilidade/colocando-sua-empresa-no-google-maps/#comments Sun, 11 Oct 2009 22:20:38 +0000 Paulo Fernandes http://www.phpaulo.com.br/?p=28 O Google tem diversos serviços que muitos de nós desconhecemos. Neste artigo será explicado um pouco sobre o Google Local Business Center. Este serviço permite que sua empresa e o endereço dela apareçam no Google, tanto na página inicial quando no Google Maps, preferencialmente no Google Maps. Para testar o serviço acesse http://www.google.com.br/local

Como Fazer

A primeira coisa que deve ser feita é o login com sua conta Google. Após esse processo para facilitar a localização do serviço, digite na busca do Google “Local Business Center” ou se preferir acesse esse link: http://www.google.com/local/add.

A sua tela deverá ser bem parecida com a imagem abaixo.

Tela Inicial

Tela Inicial

Clique no botão “Adicionar Nova Empresa” no lado direito da página. Preencha todos os campos que são solicitados, ao lado você consegue ter uma prévia do endereço localizado e dos dados digitados. Selecione até 5 categorias que mais descrevem a área de atuação de sua empresa. Após preencher todos os campos clique em “Próximo”.

Dados a serem digitados

Dados a serem digitados

Neste momento especifique o horário de funcionamento, opções de pagamento, fotos, vídeos e informações adicionais, tais como: Estacionamento, Lanchonete e o que mais a empresa tiver para oferecer aos clientes. Você também pode corrigir a localização no mapa, caso não tenha ficado exatamente onde sua empresa esta localizada, clique em “Enviar” para salvar as informações.

Dados adicionais

Dados adicionais

Agora que os dados foram enviados para o Google, você precisa confirmar todas as informações solicitadas. Para isso, o Google disponibiliza três formas:

  1. Por telefone: o Google ligará na sua empresa para confirmar os dados inseridos;
  2. Por SMS: o Google enviará um SMS confirmando os dados;
  3. Por cartão postal: o Google enviará um cartão postal para sua empresa, esse processo é o mais demorado, de 3 a 4 semanas.
Opções de confirmação

Opções de confirmação

Clique em “Concluir” para verificar as informações, no exemplo usado, foi solicitado via cartão postal, devido aos dados inseridos no sistema, veja a imagem abaixo.

Opção selecionada

Opção selecionada

Caso sua empresa seja grande e tenha diversas unidades, você pode fazer o cadastro delas utilizando um serviço de upload dos dados. Acesse esse link http://www.google.com/local/add/uploadFeed?hl=pt-BR&gl=BR para saber como proceder para realizar esse processo. A imagem abaixo mostra o printscreen do link citado.

Opção de upload de arquivo

Opção de upload de arquivo

Concluindo

Agora que você já sabe como colocar o endereço da sua empresa no Google Maps, não perca tempo e coloque-a o mais rápido possível. Dessa forma você estará aumentando a sua chance de atrair novos clientes.

Para saber mais sobre os produtos do Google e como usá-los acesse o site do Grupo de Usuários de Tecnologia Google (GTUG-SP) http://groups.google.com.br/group/sp-gtug.

]]> http://www.phpaulo.com.br/utilidade/colocando-sua-empresa-no-google-maps/feed/ 0 Entendendo um pouco a API Google Maps http://www.phpaulo.com.br/java/entendendo-um-pouco-a-api-google-maps/ http://www.phpaulo.com.br/java/entendendo-um-pouco-a-api-google-maps/#comments Sat, 15 Aug 2009 03:00:59 +0000 Paulo Fernandes http://www.phpaulo.com.br/?p=16 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 (http://code.google.com/intl/pt-BR/apis/maps/signup.html), 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

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

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&amp;v=2&amp;sensor=true&amp;key=SUA_CHAVE“></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&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       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>

                                               <div 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 defini o mapa centralizado. O local padrão que escolhi foi à 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, quando 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 do seguinte link: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html. Essa documentação está interessante, e será a base para o artigo.

Exemplos Simples

No link a seguir podemos analisar diversos exemplos do poder desta API, http://code.google.com/intl/pt-BR/apis/maps/documentation/demogallery.html.

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 action=”#” method=”get”>

                                                <input size=”50” value=”São Paulo” />

                                                <input value=”Mostrar Latitude/Longitude”/>

</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 é está:

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, hibrido 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&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       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>

                                               <form action=”#” method=”get”>

                                                                       <label for=”partida”>Partida</label>

                                                                       <input value=”São Paulo” size=”50″ />

                                                                       <br />

                                                                       <label for=”destino”>Destino</label>

                                                                       <input value=”Rio de Janeiro” size=”50″ />

                                                                       <br />

                                                                       <input value=”Obter Rota”/>

                                               </form>

                                               <div style=”width: 800px; height: 500px;”></div>

                                               <div 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 feito 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 tivemos declarado ela 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.

]]> http://www.phpaulo.com.br/java/entendendo-um-pouco-a-api-google-maps/feed/ 0