MENU It's me: Mário!

Google Maps API - 2

Google Maps API – Parte 2 – Começando!

API - Google 02 de abril de 2014 11 comentários
API - Google
  • 02 - 04 - 14
  •        
  • 11

E ae pessoal! Tudo tranquilo?

Esse é o segundo artigo da série Google Maps API. Se você não sabe do que estou falando, é melhor ler o artigo de apresentação da série.

Hoje vamos ver como inserir um mapa básico no seu site, como criar um mapa fullscreen (tela-cheia) e um mapa para sites mobiles. Vamos ver também um pouco sobre as opções de um mapa e sobre os tipos (base) de mapas. Bora?

Google Maps API - 2

No final, colocarei o link para o material desse artigo, ok?

Começando…

Estou supondo que você já tem o XAMPP instalado no seu computador ou uma hospedagem em algum lugar (funciona abrindo o arquivo .html direto no navegador? Sim! Mas eu não gosto =D )

No seu servidor local, crie uma pasta (pode ser google-maps-aula-1, logo você vai acessar por http://localhost/google-maps-aula-1Mas você já sabia disso.) Dentro dela, crie um arquivo .html e um .js. Alguns cursos e até o livro que indico (Google Maps JavaScript API Cookbook) utilizam apenas um arquivo .html e inserem o código JS nele mesmo. Eu não curto isso (além de ser má prática se for levar isso para a produção). Então aqui o material será separado dentro de pastas por artigo com index.html, main.js main.css.

HTML

O HTML básico será esse:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>Google Maps JS API</title>

    <!-- TEMOS QUE VIVER COM ESTILO ;) -->
    <link rel="stylesheet" type="text/css" href="main.css">
    <!-- WE LOVE JQUERY -->
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <!-- CHAMANDO A GOOGLE MAPS API JS -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG5ExtfBOp_7FN6jdvbabQmZQVymrZsDk?sensor=false"></script>
    <!-- NOSSO ARQUIVO JS -->
    <script src="main.js"></script>
  </head>
  <body>
    <div id="mapa"></div>
  </body>
</html>

Como vocês podem ver, é um .html básico com Doctype html  (HTML5) e apenas uma div em seu corpo. Além disso, temos um viewport (eu digo o motivo mais pra baixo), o charset UTF-8 e chamamos o CSS e os JS necessários (incluindo o Jquery). Em algumas aulas não chamaremos o CSS ou o Jquery (vai depender do que formos fazer), mas podem usar esse modelo acima para iniciar quase qualquer projeto com a Google Maps JS API.

O que raios é “maps.googleapis.com/maps/api/js…” ?

Bem… se você é Front ou já manja um pouco, sabe que <script src=”… serve para “chamar” arquivos de JS no seu documento .html, certo? Então o que você acha que “<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js…” faz? Ele chama a API JS do Google Maps!

E esse número gigante depois de ?key= ? Essa é a key ou chave da sua aplicação, que deve ser adquirida lá no Google Console.

Você pode também não usar KEY e colocar no seu código apenas:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

Eu quero uma KEY!

Para conseguir uma API Key para sua aplicação siga os passos:

1 – Clique aqui.

2 – Agora você vai criar um PROJETO. Para isso, clique no botão vermelho “Create Project”.

3 – Preencha um Nome e um ID (único) para seu projeto.

4 – Dê F5 na página e clique no projeto criado.

5 – No menu lateral esquerdo, vá até APIs & auth e depois em APIs.

6 – Procure a Google Maps JavaScript API v3 e clique em OFF para virar um ON verde. (Você pode ativar outras APIs para esse projeto… Aconselho a Google Maps Geolocation API e a Geocoding API também e no futuro, talvez, usaremos Fusion Tables API.

7 – No menu lateral esquerdo, mude de APIs para Credentials e na seção Public API access, crie uma nova key clicando no botão vermelho Create Key. Na caixa que abrirá, selecione Browser Key.

8 – Na caixa de texto abaixo de:

Accept requests from these HTTP referers (web sites) 

One URL or pattern per line. Example: *.example.com/*

escreva todas as URLs das suas aplicações (para que ninguém mais possa usar sua KEY). Nos exemplos, podemos usar *.com ou localhost/*

9 – Anote sua KEY.

Eu criei um projeto e uma KEY para usar-mos. Caso não queira criar uma pode usar essa:

AIzaSyDG5ExtfBOp_7FN6jdvbabQmZQVymrZsDk

Vamos começa não?

Vamos sim! Agora que já temos o HTML básico e até uma Key para nossa aplicação podemos começar.

Acho que não há nenhuma dúvida quanto ao arquivo HTML, mas como meu objetivo é ajudar desde o programador web que quer usar a API pela primeira vez ao cara que saiu da SOS Computadores com seu curso de Web Design ontem novato, se houverem dúvidas, postem nos comentários ou mande um e-mail!

Temos que ter estilo, não?

Vá no seu CSS e escreva:

#mapa {
  width: 800px;
  height: 500px;
}

O que isso faz? Esse CSS dá uma largura e uma altura à DIV que conterá o mapa. Já já vamos ver como funciona a lógica de inclusão do mapa, pelo JS e você vai ver que a API escreve tudo dentro de uma DIV.

Tudo tem um começo!

HTML = OK! CSS = OK!

Agora vamos fazer uma função init que irá iniciar a brincadeira.

// Definindo uma variável global para acessar o mapa:
var map;

// Função de Inicialização:
function initMap() {

// Ativando a nova cartografia e os temas
google.maps.visualRefresh = true;

// Opções do Mapa:
var mapOptions = {
   center: new google.maps.LatLng(0,0),
   zoom: 10,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Escolher qual elemento do DOM vai receber o mapa:
var mapElement = document.getElementById('mapa');

// Crie o Mapa!
map = new google.maps.Map(mapElement, mapOptions);

// Quando o documento estiver pronto:
$(document).ready(function(){
    initMap();
});

Pronto! Mas o que fizemos?

Primeiro nós definimos uma variável global para receber o mapa (linha 2). Ela será usada em vários lugares, para identificar esse mapa em particular (ou seja, jovem Gafanhoto: você pode criar vários mapas na mesma tela e interagir individualmente neles).

Depois definimos uma função (linha 5) que foi executada quando a página estava pronta (linha 24).

Nessa função, definimos uma variável para receber as opções de mapa e uma para receber o elemento do DOM que receberá o mapa.

Na linha 20, instanciamos um objeto à variável map. A sintaxe é google.maps.Map(ELEMENTO, OPÇÕES). E dentre todas as opções possíveis para seu mapa, utilizamos center, zoom e mapTypeId, que definem o ponto geográfico no qual o mapa vai estar centralizado inicialmente, o zoom inicial e o tipo de mapa. Todas essas opções são alteráveis depois pelo método setOptions(NOVAS_OPÇÕES).

Clique aqui! >> Sua bíblia << Clique aqui!

Acho que eu não poderia destacar mais o link acima (até dava… =D ).  Mas de qualquer forma: CLIQUE NELE!

Parando de brincar um pouco, o link acima é a Google Maps Javascript API V3 Reference, ou seja, demonstra, explica e expõe todas as classes e os métodos e parâmetros, que você irá usar no seu código. Lá tem inclusive o tipo de dado e como você vai escrever o que tem que escrever. <3 Google!

Deu certo?

Você já deve ter ficado curioso e testado o código acima, certo? Então já deve ter visto que deu certo e que temos um mapa na nossa DIV de 800×500.

Dúvidas? Poste nos comentários que ficarei super feliz de responder!

Transformando esse mapa em Fullscreen

Se você quer fazer uma aplicação que destaca um mapa (como é o caso do Joga+1 e do meu futuro joguinho War III). É bom fazê-la em fullscreen, não?

Para isso, iremos mexer no nosso CSS, substituindo o que tinha antes por:

html { height: 100%; }
body { height: 100%; margin: 0; }
#mapa { width: 100%; height: 100%; }


Basicamente fizemos o 
html e o body, além da própria div do Maps ficarem com altura 100%.  Zeramos as margens do body para o caso de navegadores chatos com margin inicial maior que zero  e voilà!

Dê F5 na sua página e verás um mapa ocupando toda a tela.

E para mobile?

Nosso mapa já está tranquilo para o mobile. Mas como?

Lembra da meta tag?

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

Sem essa meta tag temos um problema com o zoom do navegador do celular nos mapas. Ela resolve isso apenas desativando ele e definindo o site para iniciar com zoom (escala) 1.0.

Tipos de Mapas

Ia falar sobre como alterar as opções iniciais do mapa através de métodos JS, mas vou deixar isso para o próximo artigo.

Agora vamos ver os tipos de mapa, que foi escolhido no parâmetro mapTypeId do objeto map, lembra? São eles:

  • ROADPMAP  – Tipo de mapa que mostra as rodovias, estradas e vias em geral.
  • SATELLITE – Tipo de mapa que mostra imagens de satélite.
  • HYBRID – Tipo de mapa que mostra as rodovias, estradas e vias em geral sobre uma camada de satélite.
  • TERRAIN – Tipo de mapa que mostra o terreno com vegetação e características físicas.

Para alterar o tipo de mapa, basta colocarmos no nosso código a seguinte linha:

map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

Explicando:

map é o ponteiro (variável) do seu mapa.

setMapTypeId é o método para alterar o tipo de mapa.

google.maps.MapTypeId.ROADMAP é o tipo de mapa em si. Você pode mudar ROADMAP por TERRAINHYBRID ou SATELLITE.

Até a próxima!

E foi isso, pessoal. Agora você já sabe colocar um mapa do Google Maps no seu site e sabe também como pesquisar na API Reference por opções, como por exemplo,  draggable, minZoom e maxZoom entre várias outras.

Espero que tenham entendido e qualquer dúvida:  pergunte!

“O sábio por estar ignorante pergunta.

O ignorante de verdade permanece nesse estado.”

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preoculpe, não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.

  • Rodolfo Pereira

    parabéns pelo post, Mário! continue com o bom trabalho :)

    • mariovalney

      Muito obrigado, Rodolfo!
      Essa semana não teve jeito de postar, mas para o feriado está aí para isso!

      Novamente, obrigado pelo apoio e (sabendo ou não) por ter me ensinado muita coisa sobre o assunto: sinta-se culpado disso!!! rsrsrsrs =D

  • Thiago

    Parabéns pelo post, mas vc poderia me ajudar com uma duvida? queria fazer da seguinte maneira, um ponto A saindo para vários destinos, mas todos em sequencia, teria como? Obrigado desde já pela atenção.

    • mariovalney

      Opa Thiago! Muito obrigado pelo comentário.
      Cara, pretendo chegar nessa parte da API, mas infelizmente estou com pouquíssimo tempo.

      De qualquer forma, você pode usar Polylines (https://developers.google.com/maps/documentation/javascript/reference?hl=pt-br#Polyline) e ir adicionando os pontos em tempos diferentes (setInterval, por exemplo).
      Não testei, mas chutando acho que funcionaria. =D

      Testa e qualquer coisa continuamos conversando. Abraços!

      • Thiago

        E ae Mario! tudo em ordem? acabei resolvendo meu problema usando waypoints, gostaria de tirar mais uma duvida, desculpe a pergunta mas ainda sou leigo nesta parte, teria como depois da rota traçada eu alterar o caminho como faço entre ponto A e B no próprio maps?(só que teria N rotas)
        Valeu ae!

        • mariovalney

          Tem sim, cara. Você altera o objeto que você criou.
          No caso, teria que ter uma referencia.
          Por exemplo, um marcador é criado assim:
          new google.maps.Marker( …
          se você armazenar assim:
          var marcador = new GMaps.Marker( …
          vai poder acessá-lo e alterar o que achar necessário (dentro dos métodos disponíveis).

  • R.w

    Muito bom!

    Tem uma forma de fazer uma busca em html js para buscar lugares, ou até mesmo uma linha de ônibus?

    Valeu,
    Obrigado por compartilhar comhecimento.

    • Sim! Você pode ver um exemplo aqui: http://tdurand.github.io/mapafortaleza/

      • R.w

        Legal esse app!
        Eu gostaria de algo mais dinâmico.
        Ex: buscar uma linha de ônibus, somente isso. Como se fosse uma busca por endereço.

        • É possível sim. Só precisa ter os dados das rotas dos ônibus e implementar a API do Google Maps.

          • R.w

            Entendi!

            Então não é possível localizar qualquer ônibus sem ter a rota.
            Ok, vou dar umas pesquisadas mais.

            Valeu.

            Abs.