google-maps-api-parte-4-manipulando-o-mapa-3d-satelite-zoom-opcoes

Com os primeiros passos da série, temos um mapa que insere marcadores à partir de um endereço e uma avaliação. Voltemos agora ao nosso objeto Map. Veremos alguns métodos úteis para trabalhar com ele.

Todas as partes da série Google Maps API:

Continuando de onde paramos

Você pode pegar o código, como ficou ao final da Parte III clicando aqui, ou continuar de onde parou.

Se pegar acima, não esqueça de rodar o npm install na pasta do projeto, com o terminal.
Também deve ter o Gulp e Nodejs instalados.
Se tiver dúvidas, veja este post.

Para começar a trabalhar, abra a pasta do projeto com o terminal e rode:

1
gulp

Isso deve abrir o browser, com liveReload. Caso não abra automaticamente, acesse http://localhost:1337

Métodos do objeto google.maps.Map

Para manipular nosso mapa, a API Javascript Google Maps V3 disponibiliza alguns métodos pra gente! São eles:

  • getBounds()
  • getDiv()
  • fitBounds(objetoBounds)
  • setOptions(objetoOpcoes)
  • getProjection()
  • panBy(x,y)
  • panTo(objetoLatLng)
  • panToBounds(objetoBounds)
  • getCenter() e setCenter(objetoLatLng)
  • getHeading() e setHeading(numero)
  • getMapTypeId() e setMapTypeId(objetoMapTypeId)
  • getStreetView() e setStreetView(objetoStreetViewPanorama)
  • getTilt() e setTitlt(0ou45)
  • getZoom() e setZoom(numero)

Veremos alguns destes métodos na prática. Tomei a liberdade de nomear os parâmetros.

Testando métodos via console!

Após executar gulp, seu servidor deve ter iniciado.

Clique em Iniciar para criar o mapa, e digite um endereço, avalie-o e clique em converter.

Vamos utilizar uma ferramenta muito útil no workflow de qualquer desenvolvedor web: o console.

No google chrome, aperte f12.

Lembra que nosso mapa está instanciado na variável map? Pois podemos utilizá-la direto no console!

Digite no console:

Atenção: Cada linha é um comando, após digitar, tecle ENTER. (ignore as linhas que começam com //). E mantenha a janela aberta, para ver os resultados!

1
2
3
4
5
6
7
8
9
10
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
//viu? Agora vamos aproximar:
map.setZoom(18);
//Agora, centralizamos no marcador que você criou:
map.setCenter(marcadores[0].position);
//Agora, mudamos o plano de visão do mapa, 0 e 45
map.setTilt(0);
map.setTilt(45);
//Agora, vamos deixar o marcador mais àdireita:
map.panBy(-200, 0);

Acho que deu pra ter a idéia né?

Abaixo vou explicar o que são os objetos que alguns métodos usam como parâmetros.

Como disse, tomei a liberdade de nomeá-los de forma para facilitar o entendimento. São eles:

  • Objeto Bounds
    Nome na Documentação: google.maps.LatLngBounds
    O que é: Um retângulo que representa limite (de terreno) no mapa.
    Como criar: new google.maps.LatLngBounds(sw?LatLng, ne?LatLng);
    Um LatLng representa o canto sudoeste, e outro o canto nordeste do retângulo que define os Bounds (limites) do mapa.
    Note que cada LatLng é um objeto do tipo abaixo:

  • Objeto LatLng
    Nome na Documentação: google.maps.LatLng
    Oque é: Objeto contendo latitude e longitude
    **Como criar: new google.maps.LatLng(latitude, longitude)**

  • Objeto MapTypeId
    Nome na Documentação: google.Maps.MapTypeId
    Oque é: representa diferentes tipo de mapa, sendo eles: HYBRID, ROADMAP, SATELLITE e TERRAIN. É parâmetro do options do mapa.
    Como usar: com o método setMapTypeId, por exemplo: map.setMapTypeId(google.maps.MapTypeId.SATELLITE, ou nas configurações ao inicializar o mapa.

  • Objeto Opções
    Um objeto com as opções de configuração do mapa. O mesmo que usamos ao criar nosso mapa. Veja a lista completa de opções aqui: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Você encontra uma relação dos métodos disponíveis, bem como de seus parâmetros, neste link: https://developers.google.com/maps/documentation/javascript/reference#Map

Conclusão

Hoje o post foi um pouco ‘teórico’ e acabamos não fazendo quaisquer alterações em nosso código-fonte.

Mesmo assim, vimos os métodos disponíveis para utilizar em nossos mapas.

Testamos alungs direto no console do navegador - especialmente pra não bagunção nosso código fonte para o que faremos no próximo artigo.

Depois vimos como criar os diferentes objetos que podem ser passados como parâmetro em alguns dos métodos.

Agora, teoricamente, podemos criar controles personalizados e manipular zoom, posição e opções de nosso mapa em nossa aplicação.

Tudo que você fez pelo console poderia estar em uma função, ou no onclick de algum button.

A próxima parte será bem mais prática e divertida, não perca!