Save 37% off PRO during our Black Friday Sale! »

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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

April 23, 2016
Tweet

Transcript

  1. como você nunca viu. Google Maps

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

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

  5. None
  6. None
  7. None
  8. Maps, maps e mais maps.. https://flunearyou.org

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

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

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

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

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

  14. None
  15. None
  16. Cronograma • Geocode • Matriz de distância • Directions API

    • Street View
  17. geocode

  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."
  19. pra que eu vou usar?

  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
  21. como funciona?

  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
  23. https://maps.googleapis.com/maps/api/ geocode/output?parameters

  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

  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

  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

  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

  28. ok, zero_results, over_query_limit, request_denied, invalid_request unknown_error array com endereços geocodificados

    e informações geométricas.
  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".
  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

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

  32. • Geocode • Matriz de distância • Directions API •

    Street View Cronograma
  33. matriz distância de

  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."
  35. pra que eu vou usar?

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

    destinos.
  37. como funciona?

  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
  39. https://maps.googleapis.com/maps/api/ distancematrix/output?parameters

  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

  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
  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
  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
  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
  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

  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
  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
  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
  49. • Geocode • Matriz de distância • Directions API •

    Street View Cronograma
  50. direc tions

  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"
  52. pra que eu vou usar?

  53. Traçar a rota entre dois pontos.

  54. como funciona ?

  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
  56. https://maps.googleapis.com/maps/api/ directions/output?parameters

  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

  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

  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

  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

  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

  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

  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
  64. https://github.com/thulioph/distance-direction

  65. • Geocode • Matriz de distância • Directions API •

    Street View Cronograma
  66. street view

  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."
  68. Pra que eu vou usar? pra que eu vou usar?

  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)
  70. como funciona?

  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
  72. new google.maps.StreetViewPanorama(container, obj)

  73. var map = new google.maps.Map(document.getElementById( 'map'), { center: userPosition, zoom:

    14 }); objeto com latitude e longitude elemento do html
  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
  75. map.setStreetView(panorama);

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

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

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