google-maps-api-tutorial-1-de-3

Opa! Começa hoje nossa nova série sobre a API Javascript do Google Maps. Ao final dela, teremos um mapa que traça rotas automaticamente com a localização automática do usuário e marcadores personalizados.

Hoje é a parte I, então veremos o básico da API e como criar um mapa com ela!

É uma parte bem básica, porém servirá como base para os próximos 2 artigos.

Update: A série foi extendida e nao foram apenas 3 artigos, confira:

Workflow com Gulp e LiveReload

Usaremos o gulp com livreReload, evitando assim utilizar algum server como o apache (Xammp ? hehe) e também ficar dando F5 o tempo todo. Faremos essa preparação em 3 etapas rápidas:

  1. Arquivo Package.Json, onde declaramos as dependências do projeto

  2. Arquivo gulpfile.js, onde criamos nossas taks básicas (server, arquivos e watch)

  3. Estrutura de pastas e .gitignore, para garantir que as tasks funcionem e que possamos usar o git sem problemas, mais tarde.

1. Package.Json

Crie uma pasta para seu projeto. Dentro dela, crie um arquivo chamado package.json e insira o conteúdo abaixo.

package.json [crie o arquivo e insira o conteúdo abaixo]
1
2
3
4
5
6
7
8
{
  "name": "testes-google-maps-gulp",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-connect-multi": "^1.0.8"
  }
}

Tendo o NodeJS instalado, acesse a pasta com o terminal e rode o comando:

1
npm install

Ele irá buscar as devDependencies que definimos no package e instalá-las, dentro de uma pasta node_modules, criada automaticamente.

Você precisa ter o gulp instalado globalmente. Caso ainda não tenha, basta rodar

1
npm install -g gulp

2a. gulpfile.js - tasks arquivos e servidor

Ainda na pasta do projeto, crie um arquivo chamado gulpfile.js. Dentro, insira:

gulpfile.js (Crie o arquivo e insira o conteúdo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp')
, connect = require('gulp-connect-multi')();
  
gulp.task('arquivos', function(){
 gulp.src(['./src/**/**/*.*'])
    .pipe(gulp.dest('./build'))
    .pipe(connect.reload())
  })
  
gulp.task('servidor', connect.server({
 	root: ['build'],
 	port: 1337,
 	livereload: true,
 	open: {
    browser: 'chrome' //ou firefox ou safari... se for OSX é 'Google Chrome'
  }
}))

São 2 tasks bem simples, sendo que a task arquivos pega TODO o conteúdo das pastas da /src (e 2 níveis de subpastas) e envia para ./build.
Ela termina com .pipe(connect.reload()) que forçará a atualização do navegador.

A task servidor cria um server com o connect, passando algumas opções, como a pasta-base, ativar liveReload e abrir com o chrome. Mude seu navegador. Se usar OSX, coloque ‘Google Chrome’

2b. gulpfile.js - task watch e default task

Criaremos uma task chamada watch que irá monitorar nossos arquivos e executar a task arquivos caso haja alguma alteração neles.

Depois, uma task default para executar as 2 primeiras tasks a task watch juntas.

Insira o conteúdo ao final do arquivo gulpfile.js

gulpfile.js (Insira o conteúdo ao final do arquivo)
1
2
3
4
5
6
(...)
gulp.task('watch', function(){
    gulp.watch(['src/**/**'], ['arquivos']);
})

gulp.task('default', ['arquivos', 'servidor', 'watch'])

3. Estrutura de pastas e .gitignore

Eu não gosto de falar ‘diretórios’. Por isso, vamos criar as ‘pastas’, hehe.

Na pasta do seu projeto, crie src.

Dentro dela, crie o arquivo index.html, com o seguinte conteúdo:

index.html (Crie o arquivo dentro da pasta SRC)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Google Maps Básico</title>
</head>
<body>
  <h1>Exemplo google maps.</h1>
  <script src="js/maps.js" type="text/javascript"></script>
</body>
</html>

Agora, dentro da pasta src, crie a pasta js e, dentro dela, o arquivo maps.js. Dentro dele, o conteúdo:

maps.js (crie o arquivo dentro da pasta js, dentro de src)
1
console.log('testando o arquivo :)');

.gitignore

Na pasta raíz do projeto, ao lado de package.json e gulpfile.js, crie o arquivo .gitignore. assim, com ponto no começo e sem extensão hehe. Insira o conteúdo

.gitignore (crie na raíz e insira o conteúdo)
1
2
node_modules
build

Na primeira linha, dizemos que a pasta node_modules deve ser ignorada, já que ao rodar npm install ela é criada automaticamente.

Na segunda, a pasta build é ignorada. Isso por que ela é criada pelo gulp. Dessa forma, garantimos que os únicos arquivos à serem enviados para o git sejam os arquivos do código fonte.

Salve.

Testando as taks e arquivos.

Abra o terminal e rode gulp. Se fez tudo certinho, deve abrir o seu navegador com o arquivo index.html com o texto.

Abra o console, ou webmaster tools (f12, no chrome) e veja a mensagem: testando o arquivo :)

Mantendo a janela do navegador visível, altere o texto do h1 no index.html e veja se funcionou.

Agora sim, podemos começar a criar nosso mapa!.

Deixe o gulp rodando e prossiga:

Carregando script do google maps.

Insira a seguinte linha antes do </head> no seu index.html

index.html (insira antes do fechamento da HEAD)
1
2
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Assim puxamos o js mais atual e estável do googleapis.

No body do seu HTML, insira uma div com o id map_canvas. O id pode ser outro, mas usaremos este por convenção. Também estamos adicionando um botão para inciar o mapa.

index.html (insira dentro do body)
1
2
<button onClick="initialize()">Iniciar!</button>
  <div id="map_canvas" style="width:600px; height:300px"></div>

O botão usa o atributo onclick para executar a função initialize(). Ela não existe, criaremos agora.

Note que colocamos estilos inline (que feiooo Romuloooo!!). Por enquanto ficará assim mesmo hehe.

Criando o mapa com Javascript: Função initialize()

Edite o arquivo src/js/maps.js

maps.js (edite o arquivo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var inicial = {
  latitude: -25.428777,
  , longitude: -49.3435829
};
var divDoMapa = document.getElementById("map_canvas")
var opcoes = { 
  center: new google.maps.LatLng(inicial.latitude, inicial.longitude)
  , zoom: 10
  , mapTypeId: google.maps.MapTypeId.ROADMAP
};

function initialize() {
        var map = new google.maps.Map(divDoMapa, opcoes);
      }

Acima, declaramos 3 variáveis: incicial, divDoMapa e opcoes.

  • var inicial é a nossa localização inicial. Um objeto com latitude e longitude.

  • var divDoMapa é um getElementById que referencia nossa div#map_canvas. Poderia ser outro id.

  • var opcoes São opções do mapa. Neste exemplo, usamos apenas:
    center: um objeto google.maps.LatLng(), usando a latitude e longitude que declaramos na var inicial.
    zoom: nível 10 e mapTypeId, em que usamos o tipo de mapa chamado ROADMAP.

E por último, a função initialize(). Como separamos as variáveis direirinho,fica fácil de ver que nada mais é do que instanciar um novo google.maps.Map(), com 2 parâmetros: a div que tem o mapa, e nosso objeto opções.

Portanto, fazemos: var map = new.google.maps.Map(divDoMapa, opcoes). Instanciar o mapa em uma variável (var map), nos permitirá trabalhar com ele de forma fácil, com os princípios de OO. Veremos nas próximas partes.

Salvando e testando

Se você deixou o gulp rodando, basta salvar o arquivo, e clicar no botão Iniciar!, em seu navegador.
Note que será criado um novo mapa, na tatitude e longitude fornecidas.

Por hoje é isso! Você pode ver como ficaram os arquivos, neste commit do repositório oficial dessa série

Aliás, tentarei manter apenas 3 commits, um para cada parte da série!

Não perca, amanhã….

Hoje foi hyper-básico. Amanha entraremos em mais detalhes nas opções do mapa. Criaremos um marcador personalizado, alguns métodos para criar e remover novos marcadores e também rotas.

Não perca!!

(Ah, se tiver dúvidas, pedidos ou dicas, deixe comentário abaixo, estou esperando ¬_¬)

E insreva-se na maillist, para receber posts no conforto de seu e-mail!

Brigadão pela visita! Fique a vontade, o café tá lá na pia.