Google Maps web API

Evento: Meetup GDG Recife

Meetup na JUMP Brasil, falando sobre Distance Matrix e Directions API, mostrando como funciona e alguns exemplos.

Transcript

1. Google Maps web API
   

   View Slide

2. View Slide

3. Olár!
   Thulio Philipe
   Software Engineer @ Epitrack
   Design Gráfico - WebApps @ Unibratec
   www.thulioph.com
   

   View Slide

4. Recife, PE
   

   View Slide

5. 1.
   Distance Matrix API
   https://developers.google.
   com/maps/documentation/distance-matrix/
   

   View Slide

6. Distance Matrix API
   Modo de transporte Duração e Distância Tráfego atual e histórico
   

   View Slide

7. “
   Estima o tempo de viagem e distância
   para múltiplos destinos
   

   View Slide

8. Distance Matrix API
   Este serviço não retorna informações
   detalhadas sobre a rota.
   Para utilizar este serviço, é necessário exibir um
   mapa do Google
   Utiliza uma chave do servidor Server key
   

   View Slide

9. Você pode passar até 25 origens/destinos por
   request
   Para cada origem a matrix retorna todos os
   destinos listados.
   Distance Matrix API
   

   View Slide

10. Atenção!
    Para múltiplos destinos, utilize | para
    dividir.
    

    View Slide

11. COMOFAZ?
    

    View Slide

12. https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|Casa+Caiada+
    Olinda+pe&mode=driving&language=pt-BR
    Distance Matrix API
    

    View Slide

13. https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|Casa+Caiada+
    Olinda+pe&mode=driving&language=pt-BR
    Distance Matrix API
    

    View Slide

14. https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|barra+de+jan
    gada&mode=driving&language=pt-BR
    Distance Matrix API
    

    View Slide

15. https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|barra+de+jan
    gada&mode=driving&language=pt-BR
    Distance Matrix API
    

    View Slide

16. https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|barra+de+jan
    gada&mode=driving&language=pt-BR
    Distance Matrix API
    

    View Slide

17. Matrix de Distância
    https://maps.googleapis.
    com/maps/api/distancematrix/json?
    origins=Rua+Joao+Fragoso+de+Medeiros|Paulista+p
    e&destinations=Casa+Caiada+Olinda|barra+de+jan
    gada&mode=driving&language=pt-BR
    

    View Slide

18. 2.
    Directions API
    https://developers.google.
    com/maps/documentation/directions/
    

    View Slide

19. Directions API
    Modo de transporte Pontos no caminho Tempo de viagem
    

    View Slide

20. “
    É um serviço que calcula direções entre
    locais, usando uma requisição HTTP
    

    View Slide

21. Este serviço retorna informações detalhadas
    sobre a rota.
    Use este serviço para traçar a rota entre 2
    pontos.
    Utiliza uma chave do servidor Server key
    Não suporta múltiplos destinos ao mesmo
    tempo no request.
    Directions API
    

    View Slide

22. Possibilita adicionar pontos ao caminho
    (waypoints).
    Directions API
    

    View Slide

23. Atenção!
    Para múltiplos waypoints, utilize | para
    separa-los.
    

    View Slide

24. COMOFAZ?
    

    View Slide

25. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

26. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

27. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

28. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

29. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

30. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

31. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

32. https://maps.googleapis.
    com/maps/api/directions/json?
    origin=Rua+Joao+Fragoso+de+Medeiros&destinatio
    n=Casa+Caiada+Olinda&mode=walking&language=
    pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av+Cde+B
    oa+Vista+Recife+PE
    Distance Matrix API
    

    View Slide

33. View Slide

34. BRIGADUUU!
    Dúvidas? Sugestões? Críticas?
    No twitter @thulioph_ & thulioph@gmail.com
    

    View Slide