Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google Maps API - Como você nunca viu.

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.

Thulio Philipe

April 23, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. como você nunca viu.
    Google
    Maps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. pra
    que
    eu
    vou
    usar?

    View full-size slide

  13. 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 full-size slide

  14. como
    funciona?

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. matriz
    distância
    de

    View full-size slide

  27. 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 full-size slide

  28. pra que
    eu vou
    usar?

    View full-size slide

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

    View full-size slide

  30. como
    funciona?

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size 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
    best_guess,
    pessimistic,
    optimistic

    View full-size slide

  41. 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 full-size slide

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

    View full-size slide

  43. 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 full-size slide

  44. pra
    que
    eu
    vou
    usar?

    View full-size slide

  45. Traçar a rota entre dois pontos.

    View full-size slide

  46. como
    funciona
    ?

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. como
    funciona?

    View full-size slide

  62. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  65. 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 full-size slide

  66. map.setStreetView(panorama);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Obrigado!
    Thulio Philipe
    [email protected]
    @thulioph_

    View full-size slide