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.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 08/10/07
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);
