Como criar um mapa com Google Maps API v3 O Google Maps JavaScript API v3 permite inserir um mapa personalizado em qualquer web site, de forma fácil e rápida.

Como criar um mapa com Google Maps API v3

por segunda-feira, 23 de setembro de 2013

O Google Maps JavaScript API v3 permite inserir um mapa personalizado em qualquer web site, de forma fácil e rápida. Mesmo para quem tem poucas noções de JavaScript, mas quer aventurar-se nas linguagens de programação, esta API da Google é bastante fácil de aprender e intuitiva.

Iniciamos este tutorial com uma breve noção básica do necessário para inserir um mapa num web site:

  1. URL para a API do Google Maps a inserir na secção <head> da página.
  2. Espaço reservado na página do web site para o mapa.
  3. Declarações CSS para definir o tamanho do espaço reservado para o mapa.
  4. Ficheiro JavaScript para definir as opções do mapa.

Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.

DEMO DOWNLOAD

Link para a API do Google Maps

O link para a API do Google Maps faz a chamada para o ficheiro JavaScript que irá carregar todos os componentes do mapa e deve ser inserido na secção <head> da página. Neste caso é enviado um parâmetro - &sensor=false - indicando que este mapa não vai fazer uso de sensores de localização. Este parâmetro é obrigatório e aceita os valores false ou true.

HTML /index.htmlmarnoto.com
<!DOCTYPE html>
<html>
   <head>
      <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
   </head>
   <body>
   ...

Espaço para o mapa

O mapa pode ser inserido em qualquer secção da página, basta para isso reservar um espaço específico no ficheiro HTML. Por norma utiliza-se o elemento <div> com um id="map-canvas".

HTML /index.htmlmarnoto.com
<body>
   <div id="map-canvas"></div>
   ...

O tamanho do mapa

O tamanho do mapa é definido pelas declarações do ficheiro .css e a única declaração obrigatória é a altura. Se não for definida uma altura específica o <div id="map-canvas"> não expande e o mapa não será visualizado.

CSS /style.cssmarnoto.com
#map-canvas {
   width: 400px;
   height: 400px;
}

O exemplo anterior define uma largura de 400px, mas este valor é opcional. As medidas podem também ser definidas em percentagens.
O código seguinte apresenta um mapa que ocupa a totalidade da página.

CSS /style.cssmarnoto.com
html {
   height: 100%;
}
body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map-canvas {
   height: 100%;
}

Personalizar o mapa

As definições personalizadas do nosso mapa são declaradas num ficheiro JavaScript da seguinte forma.

JavaScript /map.jsmarnoto.com
function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.680898,-8.684059),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

A função initialize() contém duas variáveis mapOptions e map. A primeira define algumas características do mapa na sua fase de inicialização. A segunda variável indica à API onde deve inserir o mapa e faz referência à variável que contém as opções de inicialização.

As opções definidas neste exemplo são as seguintes:

  • center: new google.maps.LatLng(40.680898,-8.684059)
    dentro dos parêntesis são definidas as coordenadas de Latitude e Longitude para indicar o centro do mapa.
  • zoom: 11
    indica o valor para ampliação do mapa, varia entre 0 e 21. Quanto maior for este valor mais pormenorizado é o mapa. A área de cobertura do mapa é definida pelo tamanho do espaço reservado para o mapa e pelo valor do zoom. Quanto maior for o valor do zoom, menor a área de cobertura do mapa.
  • mapTypeId: google.maps.MapTypeId.ROADMAP
    o mapTypeID define qual o tipo de mapa apresentado na inicialização. Este parâmetro não restringe o  tipo de mapa, o utilizador pode alterar o tipo de mapa que pretende utilizar.
    Tipos de mapa disponíveis:
    • ROADMAP (mapa normal em 2D)
    • SATELLITE (imagens fotografia aérea)
    • HYBRID (fotografia aérea com sobreposição de ruas e outras informações)
    • TERRAIN (mapa em modo 3D com elevações do terreno)

A variável var map = faz uma chamada para a API e passa dois parâmetros

  • document.getElementById("map-canvas") indica qual o espaço onde deve ser inserido o mapa
  • mapOptions passa os valores definidos nas opções

Por fim é iniciada a função initialize() através de uma função própria da API, o addDomListener. Desta forma quando ocorrer o evento "load" do elemento window é inicializada a função initialize e o mapa definido surge na página.

Ver exemplo do mapa.

Coordenadas do Google Maps

As coordenadas definidas em google.maps.LatLng() estão no formato de coordenadas graus decimais e podem ser encontradas da seguinte forma:

  1. Abrir a página https://maps.google.com
  2. Procurar o local desejado
  3. Fazer click com o botão do lado direito no local desejado e escolher a opção "O que é isto?"
  4. Na caixa de pesquisa (topo) aparecem as coordenadas do local. São estes os valores que devem ser utilizados


Download dos ficheiros necessários para este exemplo

Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.


Miguel Marnoto

A minha especialização no Google Maps e na sua API JavaScript v3 é uma consequência do gosto pelos mapas e o reconhecimento da importância que o serviço Google Maps tem hoje no dia-a-dia das pessoas.

1 comentário para ''Como criar um mapa com Google Maps API v3"

COMENTAR