Controles em mapas de Google

Em nossos mapas gerados com o API de Google Maps se podem incluir diversos controles para interagir com o usuário.

Como já devemos de saber, os mapas de Google podem ser integrados na página de qualquer pessoa que deseje, através de um API em Javascript. Neste caso vamos ver como incluir controles de usuário dentro de um mapa de Google, como funciona o API neste sentido e que tipos de controles existem disponíveis.

Primeiramente vale dizer que este artigo vem a ampliar a informação do manual Desenvolvimento com o API de Google Maps, portanto, muitas das explicações para trabalhar com os mapas de Google tem de ser consultadas em outros capítulos do mencionado manual.

Tipos de controles de usuário

Os controles de usuário dos mapas de Google (controls em inglês) são interfaces desde onde o usuário pode interagir com o mapa, para efetuar ações como por exemplo, fazer zoom, selecionar entre tipos de mapa (satélite, mapa, híbrido), ou se mover por um mapa pequeno mais geral. Todos estes controles estão já criados e existem instruções e classes para incluí-los facilmente em um mapa de Google.

Embora qualquer desenvolvedor possa criar seus próprios controles, existem vários tipos de controles de usuário nos mapas de Google já criados de antemão:

GLargeMapControl: Mostra uma interface para fazer zoom e mover-se pelo mapa, com uma espécie de regra onde se pode escolher as diferentes aproximações da vista. Este controle aparece na parte superior esquerda.
GSmallMapControl: É outro controle de usuário para fazer zoom e mover-se pelo mapa, porém menor, que também aparece na esquina superior esquerda.
GSmallZoomControl: Um controle de usuário muito pequeno, que aparece na esquina superior esquerda que simplesmente tem um botão para ampliar o zoom e outro botão para reduzi-lo. Porém, não tem botões para mover-se pelo mapa.
GScaleControl: Este é um controle que simplesmente informa sobre a escala atual do mapa. Com este controle não se pode interagir, é meramente informativo.
GMapTypeControl: Este controle inclui três botões para mudar entre diferentes tipos de mapa (mapa político de ruas e estradas, mapa satélite e mapa híbrido -ruas e estradas sobre o fundo de satélite)
GOverviewMapControl: Com este controle aparece um pequeno mapa na esquina inferior direita onde aparece uma vista geral com menos zoom do mapa atual, a através do qual também podemos nos mover.

Adicionar controles a um mapa de Google

Os controles de usuário para os mapas de Google que vimos se incluem com uma simples instrução Javascript na hora de criar o mapa. Como os controles já estão pré-definidos no API de Google Maps, simplesmente temos que associá-los ao mapa que estamos criando.

Para isso se utiliza um método da classe GMap2 chamado addControl(). A classe GMap2 é a que se utiliza para instanciar um mapa de google. Com ela criamos o objeto mapa e logo a este objeto com addControl() lhe associamos os controles desejados. O método addControl() recebe uma instancia do controle de usuário que se deseja criar.

Por exemplo, se temos o mapa em um objeto chamado "map", executaremos o método addControl() desta maneira:

map.addControl(new GMapTypeControl());

Podemos incluir todos os controles que desejarmos fazendo várias chamadas ao método addControl(), passando como parâmetro distintas instancias dos controls que queremos incluir.

Vejamos um exemplo completo de um mapa de Google que tem uma série de controles de usuário:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Exemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-SUA-CHAVE-DO-API" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12);
      map.addControl(new GMapTypeControl());
      map.addControl(new GSmallZoomControl());
      map.addControl(new GScaleControl());
      map.addControl(new GOverviewMapControl());
      map.setMapType(G_SATELLITE_MAP);
   }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>

Como havíamos dito antes, o desenvolvedor pode criar seus próprios controles para incluí-los em seus mapas. Este é um tema que trataremos mais adiante, porém agora podemos referir à documentação do API Google Maps para obter mais informação: http://www.google.com/apis/maps/documentation/controls.html