Google Maps API V3 Tutorial

Tutorial da Google Maps Javascript API
V3
Observação: A Google Maps JavaScript API Versão 3 documentada nestas páginas é
agora a JavaScript API oficial. A Versão 2 dessa API possui previsão oficial de
remoção, de acordo com a nossa política de remoção. Incentivamos você a migrar o seu
código para esta nova e aprimorada versão!

1. Introdução
2. O "Hello, World" do Google Maps
1. Como declarar o aplicativo como HTML5
2. Como carregar a API do Google Maps V3
3. Elementos DOM do mapa
4. Opções de mapa
5. google.maps.Map - o objeto elementar
6. Como carregar o mapa
3. Latitudes e longitudes
4. Níveis de zoom

Introdução
O elemento fundamental de qualquer aplicativo da API do Google Maps V3 é o próprio
"mapa". Este documento discute o uso do objeto fundamental google.maps.Map e as
noções básicas de operações de mapa. Se você seguiu o tutorial da Versão 2, verá que
há muitas semelhanças. No entanto, existem algumas diferenças. Desse modo, não deixe
de ler este documento.

O "Hello, World" do Google Maps v3
O jeito mais fácil de se familiarizar com a API do Google Maps é analisar um simples
exemplo. A página web a seguir exibe um mapa centralizado em Sydney, New South
Wales, Austrália:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"

src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);

var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Ver exemplo (map-simple.html)

Mesmo nesse exemplo simples, há algumas coisas a serem observadas:

1. Declaramos o aplicativo como HTML5 usando a declaração <!DOCTYPE html>.
2. Incluímos a Google Maps JavaScript API usando uma tag script.
3. Criamos um elemento div chamado "map_canvas" para suportar o mapa.
4. Criamos um literal de objeto JavaScript para conter diversas propriedades do
mapa.
5. Escrevemos uma função JavaScript para criar um objeto "map".
6. Inicializamos o objeto do mapa a partir do evento onload da tag body.

Essas etapas são explicadas a seguir.

Como declarar seu aplicativo como HTML5
Recomendamos que você declare um verdadeiro DOCTYPE dentro de seu aplicativo da
web. Nestes exemplos, declaramos nossos aplicativos como HTML5 usando o DOCTYPE
HTML5 simples, como mostrado a seguir:

<!DOCTYPE html>

A maioria dos navegadores atuais renderizará o conteúdo que for declarado com este
DOCTYPE em "modo padrão", o que significa que seu aplicativo deve ser mais
compatível entre navegadores. O DOCTYPE também é projetado para ficar defasado. Os
navegadores que não o entendem, o ignoram e usam o "modo quirks" para mostrar seu
conteúdo.

Alguns CSS que funcionam no modo quirks não são válidos no modo padrão.
Especificamente, todos os tamanhos baseados em porcentagem devem ser herdados de
elementos de bloco pai. Se algum dos ancestrais não especificar um tamanho, eles são
atribuídos o tamanho de 0 x 0 pixels. Por esse motivo, incluímos a declaração <style>
a seguir:

<style type="text/css">
html { height: 100% }

body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>

Esta declaração CSS indica que o recipiente do mapa <div> (denominado map_canvas)
deverá ocupar 100% da altura do corpo HTML. Observe que é necessário declarar
especificamente essas percentagens tanto para <body> quanto para <html>.

Como carregar a Google Maps API
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>

O URL http://maps.google.com/maps/api/js aponta para o local de um arquivo
JavaScript que carrega todos os símbolos e as definições necessárias ao uso da API do
Google Maps V3. A sua página deve conter uma tag script que aponte para esse URL.

A tag <meta> nesse cabeçalho especifica que esse mapa deve ser exibido na tela inteira
e não deve ser redimensionado pelo usuário. Para obter mais informações, consulte
Como desenvolver para aparelhos celulares.

Também precisamos definir um parâmetro sensor para indicar se esse aplicativo usa
um sensor para determinar a localização do usuário. Deixamos esse exemplo como uma
variável set_to_true_or_false para enfatizar que você deve definir este valor
explicitamente para true ou false.

Ao carregar a Google Maps Javascript API através do URL
http://maps.google.com/maps/api/js, você pode, como alternativa, carregar mais
bibliotecas usando o parâmetro libraries. As bibliotecas são módulos de código que
fornecem funcionalidade adicional à principal API Javascript, mas não são carregadas a
menos que você as solicite especificamente. Para obter mais informações, consulte
Bibliotecas da Google Maps API V3.

Se seu aplicativo for um aplicativo HTTPS, você pode, em vez disso, preferir carregar a
Google Maps Javascript API em HTTPS.

Elementos DOM do mapa
<div id="map_canvas" style="width: 100%; height: 100%"></div>

Para que o mapa seja exibido em uma página da web, precisamos reservar um lugar para
ele. Normalmente, fazemos isso criando um elemento chamado div e obtendo uma
referência a ele no DOM (modelo de objeto do documento) do navegador.

No exemplo acima, definimos um <div> chamado "map_canvas" e definimos o seu
tamanho usando atributos de estilo. Esse tamanho está definido como "100%", ou seja,
será expandido para se ajustar ao tamanho dos aparelhos celulares. Talvez seja

necessário ajustar esses valores com base no tamanho da tela e no preenchimento do
navegador. O mapa sempre assumirá o tamanho do elemento que o contém, de modo
que você sempre deve definir um tamanho em <div> explicitamente.

Opções de mapa
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Para inicializar um mapa, primeiro criamos um objeto Map options para conter as
variáveis de inicialização do mapa. Esse objeto não é construído; em vez disso, ele é
criado como um literal de objeto. Como queremos centralizar o mapa em um ponto
específico, também criamos um valor latlng para conter esse local e o passamos nas
opções do mapa. Para obter mais informações sobre como especificar locais, consulte
Latitudes e longitudes abaixo.

Também definimos o nível de zoom inicial e mapTypeId como
google.maps.MapTypeId.ROADMAP. Os seguintes tipos são suportados:

ROADMAP exibe as blocos 2D normais, padrão, do Google Maps.
SATELLITE exibe blocos fotográficos.
HYBRID exibe uma mistura entre blocos fotográficos e uma camada de blocos
com recursos importantes (estradas, nomes de cidade).
TERRAIN exibe blocos de relevo físico para exibição de recursos de elevação e
água (montanhas, rios etc.).

Diferentemente do que ocorre na API do Google Maps V2, não existe nenhum tipo de
mapa padrão. Você deve definir um tipo de mapa inicial específico para ver os blocos
apropriados.

Para obter mais informações sobre tipos de mapa, consulte a seção Tipos de mapa. No
entanto, na maioria dos casos, é necessário saber utilizar somente os tipos básicos
acima.

google.maps.Map - o objeto elementar
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

A classe JavaScript que representa um mapa é a classe Map. Os objetos dessa classe
definem um único mapa em uma página. Você pode criar mais de uma instância dessa
classe. Cada objeto definirá um mapa diferente na página. Criamos uma nova instância
dessa classe usando o operador JavaScript new.

Ao criar uma nova instância do mapa, você especifica um elemento HTML <div> na
página como um recipiente para o mapa. Os nós HTML são filhos do objeto JavaScript

document e obtemos uma referência a esse elemento pelo método
document.getElementById().

Esse código define uma variável (chamada map) e a atribui a um novo objeto Map, além
de passar as opções definidas no literal de objeto myOptions. Essas opções serão usadas
para inicializar as propriedades do mapa. A função Map() é conhecida como construtor
e a sua definição é mostrada a seguir:

Construtor Descrição
google.maps.Map( Cria um novo mapa usando os parâmetros opcionais
opts?) passados no parâmetro opts.

Como carregar o mapa
<body onload="initialize()">

Durante a renderização de uma página HTML, o DOM é criado e todas as imagens e
scripts externos são recebidos e incorporados ao objeto document. Para garantir que
nosso mapa seja colocado na página após ela ter sido totalmente carregada, só
executamos a função que cria o objeto Map depois que o elemento <body> da página
HTML recebe um evento onload. Isso evita um comportamento imprevisível e nos dá
mais controle sobre como e quando o mapa é desenhado.

O atributo onload da tag body é um exemplo de um manipulador de evento. A API
Javascript do Google Maps fornece ainda um conjunto de eventos que podem ser
manipulados para determinar alterações de estado. Para obter mais informações,
consulte Eventos de mapa.

Ver exemplo (map-simple.html)

Latitudes e longitudes
Precisamos de uma forma para fazer referência às localizações do mapa O objeto
google.maps.LatLng fornece um mecanismo assim na API do Google Maps. Você
cria um objeto LatLng, passando seus parâmetros na ordem { latitude, longitude }:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Observação: O processo de transformar um endereço em um ponto geográfico é
conhecido como geocodificação. A geocodificação é suportada nesta versão da API do
Google Maps. Para obter mais informações, consulte Geocodificação na seção de
serviços.

Os objetos LatLng têm muitos usos na API do Google Maps. O objeto
google.maps.Marker usa um LatLng no seu construtor, por exemplo, e coloca uma
sobreposição de marcador no mapa no local geográfico especificado.

Níveis de zoom
Oferecer um mapa de toda a Terra como uma única imagem exigirá um mapa imenso ou
um pequeno mapa com resolução muito baixa. Como resultado, as imagens de mapas do
Google Maps e da API do Google Maps são divididas em "blocos" de mapa e "níveis de
zoom". Em baixos níveis de zoom, um pequeno conjunto de blocos de mapa abrange
uma vasta área. Em níveis de zoom mais altos, os blocos têm uma resolução maior e
abrangem uma área menor.

Especifique a resolução na qual exibir um mapa definindo a propriedade zoom do Map,
onde o 0 do zoom corresponde a um mapa da Terra totalmente ampliado e níveis de
zoom mais altos aumentam o zoom em uma resolução maior.

As três imagens seguintes refletem o mesmo local de Tóquio em níveis de zoom de 0,7
e 18.

Google Maps API V3 Tutorial

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Google Maps API V3 Tutorial

Semelhante a Google Maps API V3 Tutorial (20)

Google Maps API V3 Tutorial