Tipos de mapa en Google Maps

Continuamos com o desenvolvimento de mapas de Google, vemos os tipos de mapa ou tipos de vista, satélite, ruas e mapa híbrido.

Ao desenvolver com Google Maps podemos escolher o tipo de mapa que os usuários verão, entre as diferentes vistas pré-definidas como são a vista satélite, vista de ruas o vista híbrida (satélite e ruas em modo semi-transparente.

Para definir o tipo de mapa em um mapa de Google temos o método setMapType() da classe GMap2. O método setMapType() recebe o tipo de mapa que se deseja ver. À princípio existem os seguintes tipos de mapa:

G_NORMAL_MAP
É para um mapa normal, que é o mapa político, com os nomes de localizações. Este mapa é o definido por padrão. À princípio, aparecem os diferentes países, porém se ampliarmos veremos as cidades importantes, estradas, etc e se dermos mais zoom sobre um povoado veremos os nomes das ruas, praças, bairros, etc.

G_SATELLITE_MAP
Este mapa permite ver o mundo com imagens tomadas por satélite.

G_HYBRID_MAP
Este mapa combina a vista satélite e a vista normal. Sobre as fotos satélite se pintam em cima as diferentes localizações, ruas, etc.

Vejamos um mapa de Google no qual definimos o tipo de mapa. Mostramos uma vista satélite neste caso.

<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&key=AQUI-SUA-CHAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//função para carregar um mapa de Google.
//Será chamada quando a página tiver terminado de carregar. Evento onload
function load() {
   //comprovamos se o navegador for compatível com os mapas de google
   if (GBrowserIsCompatible()) {
      //instanciamos um mapa com GMap, passando uma referência à camada ou <div> onde quisermos mostrar o mapa
      var map = new GMap2(document.getElementById("map"));
      //centralizamos o mapa em uma latitude e longitude desejadas
      map.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17);
      map.setMapType(G_SATELLITE_MAP);
   }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>

Com este código teremos uma vista satélite de Barcelona centralizada na praça onde está a estátua de Colombo assinalando com o dedo. Duas coisas que há que ver:

Na linha que carrega o API de Google Maps temos que substituir "AQUI-SUA-CHAVE" pela chave de usuário do API proporcionada em Google ao nos registrar para usar seus mapas em nosso web site. http://maps.google.com/maps?file=api&v=2&key=AQUI-SUA-CHAVE
A linha map.setMapType(G_SATELLITE_MAP); é onde carregamos o tipo de vista.

Nota: Existem outros artigos anteriores onde explicamos temas adicionais dos mapas de Google que você deveria conhecer para entender este código.: Google Maps API 2

Agora, se desejarmos um mapa híbrido, só teremos que mudar a linha:

map.setMapType(G_SATELLITE_MAP);

Por esta outra linha, onde especificamos outro tipo de mapa:

map.setMapType(G_HYBRID_MAP);

Também podemos provar tirar essa linha onde especificamos o tipo de mapa. Veremos como sai então o mapa de ruas. É o mesmo que se especificássemos o tipo de mapa normal.

map.setMapType(G_NORMAL_MAP);