Google Maps API - Como você nunca viu.

Evento: JsDay Campina Grande - PB

Palestra apresentada no Teatro UNIFACISA, falando sobre o funcionamento da API do Google Maps no Uber, 99Táxis e Easy Táxi, mostrando exemplos e sugestões.

Transcript

1. como você nunca viu.
   Google
   Maps
   

   View Slide

2. View Slide

3. Front-end engineer
   Web Apps @Unibratec
   CSS ❤ Offline First
   @thulioph
   

   View Slide

4. Front-end engineer
   Web Apps @Unibratec
   CSS ❤ Offline First
   @thulioph_
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Maps, maps e mais maps..
   https://flunearyou.org
   

   View Slide

9. Maps, maps e mais maps..
   https://foursquare.com
   

   View Slide

10. Maps, maps e mais maps..
    https://guardioesdasaude.org
    

    View Slide

11. Maps, maps e mais maps..
    https://thulioph.github.io/twitter-realtime
    

    View Slide

12. Maps, maps e mais maps..
    https://thulioph.github.io/formlocation.js
    

    View Slide

13. Maps, maps e mais maps..
    https://hortalivre.com.br
    

    View Slide

14. View Slide

15. View Slide

16. Cronograma
    • Geocode
    • Matriz de distância
    • Directions API
    • Street View
    

    View Slide

17. geocode
    

    View Slide

18. Documentação 

    https://developers.google.com/maps/documentation/geocoding/intro
    "Geocodificação é o processo de conversão de endereços (rua, avenida,
    bairro) em coordenadas geográficas (latitude e longitude) que podem
    ser usadas para inserir marcadores em um mapa ou posicionar o mapa."
    

    View Slide

19. pra
    que
    eu
    vou
    usar?
    

    View Slide

20. Mostrar a localização
    do usuário no mapa
    Pegar a latitude e longitude
    para fazer qualquer coisa
    Traçar a rota entre
    dois ou mais pontos
    Detalhes sobre o endereço de
    onde o usuário está
    Pega as coordenadas
    e mostra o endereço
    

    View Slide

21. como
    funciona?
    

    View Slide

22. Copie e cole o código
    Obtenha uma chave
    Adicione o script do google maps ao seu projeto
    https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
    

    View Slide

23. https://maps.googleapis.com/maps/api/
    geocode/output?parameters
    

    View Slide

24. https://maps.googleapis.com/maps/api/
    geocode/json?address=Rua+Joao+Fragoso+de
    +Medeiros+1851+Jaboatao+dos
    +guararapes&key=sua_chave_aqui&language=pt
    -BR
    

    View Slide

25. https://maps.googleapis.com/maps/api/
    geocode/json?address=Rua+Joao+Fragoso+de
    +Medeiros+1851+Jaboatao+dos
    +guararapes&key=sua_chave_aqui&language=pt
    -BR
    parâmetro obrigatório
    

    View Slide

26. https://maps.googleapis.com/maps/api/
    geocode/json?address=Rua+Joao+Fragoso+de
    +Medeiros+1851+Jaboatao+dos
    +guararapes&key=sua_chave_aqui&language=pt
    -BR
    parâmetro obrigatório
    

    View Slide

27. https://maps.googleapis.com/maps/api/
    geocode/json?address=Rua+Joao+Fragoso+de
    +Medeiros+1851+Jaboatao+dos
    +guararapes&key=sua_chave_aqui&language=pt
    -BR
    

    View Slide

28. ok, zero_results, over_query_limit,
    request_denied, invalid_request
    unknown_error
    array com endereços
    geocodificados e informações
    geométricas.
    

    View Slide

29. Documentação 

    https://developers.google.com/maps/documentation/geocoding/intro
    "A geocodificação reversa é o processo de conversão
    de coordenadas geográficas em um endereço legível".
    

    View Slide

30. https://maps.googleapis.com/maps/api/
    geocode/json?
    latlng=-8.1948382,-34.9231098&key=sua_chav
    e_aqui&language=pt-BR
    atenção na ordem
    

    View Slide

31. http://codepen.io/thulioph/pen/yizek
    

    View Slide

32. • Geocode
    • Matriz de distância
    • Directions API
    • Street View
    Cronograma
    

    View Slide

33. matriz
    distância
    de
    

    View Slide

34. Documentação 

    https://developers.google.com/maps/documentation/distance-matrix/
    "O serviço calcula a distância e duração de um curso/viagem
    entre várias origens e destinos, usando um determinado
    modo de viagem."
    

    View Slide

35. pra que
    eu vou
    usar?
    

    View Slide

36. Estimar a distância e duração
    de uma viagem para múltiplos destinos.
    

    View Slide

37. como
    funciona?
    

    View Slide

38. Copie e cole o código
    Adquira uma chave de servidor (server key)
    Adicione o script do google maps ao seu projeto
    https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
    

    View Slide

39. https://maps.googleapis.com/maps/api/
    distancematrix/output?parameters
    

    View Slide

40. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    

    View Slide

41. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    parâmetro obrigatório
    

    View Slide

42. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    parâmetro obrigatório
    

    View Slide

43. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    utilize uma barra
    para separar os endereços
    aceita até 25 pares
    de origem/destino
    por requisição
    

    View Slide

44. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    driving, walking,
    bicycling, transit
    

    View Slide

45. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    

    View Slide

46. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    timestamp, now
    

    View Slide

47. https://maps.googleapis.com/maps/api/
    distancematrix/json?origins=Rua+Joao
    +Fragoso+de+Medeiros+Jaboatao+dos
    +Guararapes|Candeias+Jaboatao+dos
    +Guararapes&destinations=Casa+Caiada
    +Olinda|Praia+do+Janga+Paulista
    +Olinda&mode=bicycling&language=pt-
    BR&departure_time=1461378165760&traffic_mo
    del=best_guess
    best_guess,
    pessimistic,
    optimistic
    

    View Slide

48. ok, invalid_request, max_elements_exceeded,
    over_query_limit, request_denied, unknown_error
    array com origens e destinos
    informações de distância e
    duração
    

    View Slide

49. • Geocode
    • Matriz de distância
    • Directions API
    • Street View
    Cronograma
    

    View Slide

50. direc
    tions
    

    View Slide

51. Documentação 

    https://developers.google.com/maps/documentation/javascript/directions
    "Um serviço que calcula direções entre locais,
    usando uma requisição HTTP"
    

    View Slide

52. pra
    que
    eu
    vou
    usar?
    

    View Slide

53. Traçar a rota entre dois pontos.
    

    View Slide

54. como
    funciona
    ?
    

    View Slide

55. Copie e cole o código
    Adquira uma chave de servidor (server key)
    Adicione o script do google maps ao seu projeto
    https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
    

    View Slide

56. https://maps.googleapis.com/maps/api/
    directions/output?parameters
    

    View Slide

57. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    

    View Slide

58. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    parâmetro obrigatório
    

    View Slide

59. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    parâmetro obrigatório
    

    View Slide

60. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    driving, walking,
    bicycling
    

    View Slide

61. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    

    View Slide

62. https://maps.googleapis.com/maps/api/
    directions/json?origin=Rua+Joao+Fragoso+de
    +Medeiros+Jaboatao+dos
    +Guararapes&destination=Casa+Caiada
    +Olinda&mode=driving&language=pt-
    BR&waypoints=Av+Rio+Branco+Recife+PE|Av
    +Cde+boa+vista
    pontos de
    referência
    

    View Slide

63. ok, not_found, zero_results, max_waypoints_exceeded,
    invalid_request, over_query_limit, request_denied,
    unknow_error
    array com detalhes da
    geocodificação
    array com informações sobre
    as rotas
    informações detalhadas,
    passo-a-passo, distância e
    duração
    

    View Slide

64. https://github.com/thulioph/distance-direction
    

    View Slide

65. • Geocode
    • Matriz de distância
    • Directions API
    • Street View
    Cronograma
    

    View Slide

66. street
    view
    

    View Slide

67. Documentação 

    https://developers.google.com/maps/documentation/javascript/streetview
    "Visualizações panorâmicas em 360º de vias
    designadas em toda a área de cobertura."
    

    View Slide

68. Pra que eu vou usar?
    pra que
    eu vou
    usar?
    

    View Slide

69. Exibir a localização
    Fornecer informações adicionais
    para o usuário do local que ele está
    Melhorar a experiência do usuário
    na sua aplicação (UX)
    

    View Slide

70. como
    funciona?
    

    View Slide

71. Copie e cole o código
    Adquira uma chave
    Adicione o script do google maps ao seu projeto
    https://maps.googleapis.com/maps/api/js?key=sua_key_aqui
    

    View Slide

72. new
    google.maps.StreetViewPanorama(container,
    obj)
    

    View Slide

73. var map = new
    google.maps.Map(document.getElementById(
    'map'), {
    center: userPosition,
    zoom: 14
    });
    objeto com
    latitude e longitude
    elemento do html
    

    View Slide

74. var panorama = new
    google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
    position: userPosition,
    pov: {
    heading: 34,
    pitch: 10
    }
    });
    ângulo de rotação
    horizontal e vertical
    elemento do html
    

    View Slide

75. map.setStreetView(panorama);
    

    View Slide

76. https://github.com/thulioph/street-panorama
    

    View Slide

77. Prontos para brincar
    com a api do
    Google Maps?
    

    View Slide

78. Obrigado!
    Thulio Philipe
    thulioph@gmail.com
    @thulioph_
    

    View Slide