Google Maps API – Parte 2 – Começando!
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?
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-1. Mas 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 e 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>
<link rel="stylesheet" type="text/css" href="main.css">
<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_7FN6jd****************
Edit: a partir de 2018 você precisa criar sua própria KEY, pois o Google Maps começou a exigir conta de cobrança para utilização da API, mas não se preocupe, eles dão $ 200 em crédito.
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 TERRAIN, HYBRID 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.”