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. 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:

URL para a API do Google Maps a inserir na secção <head> da página.
Espaço reservado na página do web site para o mapa.
Declarações CSS para definir o tamanho do espaço reservado para o mapa.
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:

Abrir a página https://maps.google.com
Procurar o local desejado
Fazer click com o botão do lado direito no local desejado e escolher a opção "O que é isto?"
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

Como_criar_mapa_GoogleMapsAPI.zip

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.

Categorias:

Google Maps API V3

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.