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

Serviços e APIs do Google Maps

Serviços e APIs do Google Maps

Evento: CEjs

Palestra apresentada na Faculdade FA7, falando sobre algumas APIs e serviços do Google Maps como: geocode, matriz de distância, directions e street view.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

June 04, 2016
Tweet

Transcript

  1. como você nunca viu. Google Maps

  2. None
  3. Front-end Engineer Design Gráfico @Unibratec Web Apps @Unibratec @thulioph

  4. Front-end Engineer Design Gráfico @Unibratec Web Apps @Unibratec @thulioph_

  5. None
  6. Era uma vez...

  7. http://tableless.com.br/api-google-maps-v3

  8. Só que aí..

  9. None
  10. quem procura acha!

  11. None
  12. quem é seu melhor amigo?

  13. navigator.geolocation.getCurrentPosition()

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

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

  16. Maps, maps e mais maps.. http://cittamobi.com.br

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

  18. Maps, maps e mais maps.. https://angrytaxis.com

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

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

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

  22. None
  23. Cronograma • Geocode • Matriz de distância • Directions API

    • Street View
  24. geocode

  25. Documentação 
 https://developers.google.com/maps/documentation/geocoding/intro "Geocodificação é o processo de conversão de

    endereços em coordenadas geográficas que podem ser utilizadas para inserir marcadores em um mapa ou posicionar o mapa."
  26. onde usa?

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

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

  31. 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 output

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

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

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

  35. 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".
  36. 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

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

    e informações geométricas.
  38. como funciona na prática..

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

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

    Street View Cronograma
  41. matriz de distância

  42. 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."
  43. onde usa?

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

    destinos.
  45. como funciona?

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

  48. 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 output

  49. 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
  50. 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
  51. 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
  52. 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
  53. 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

  54. 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
  55. 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
  56. como funciona na prática..

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

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

    Street View Cronograma
  60. directions

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

    usando uma requisição HTTP"
  62. onde usa?

  63. Traçar a rota entre dois pontos.

  64. como funciona?

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

  67. 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 output

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

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

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

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

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

  73. 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
  74. como funciona na prática..

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

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

    Street View Cronograma
  77. street view

  78. 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."
  79. Pra que eu vou usar? onde usa?

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

  82. 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
  83. <div id="map"></div> <div id="panoramic"></div> container do mapa container do street

    view
  84. objeto com latitude e longitude elemento do html var map

    = new google.maps.Map(document.getElementById( 'map'), { center: userPosition, zoom: 14 });
  85. new google.maps.StreetViewPanorama(container, obj) construtor

  86. 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
  87. map.setStreetView(panorama);

  88. como funciona na prática..

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

  90. demo

  91. Pronto para brincar com a api do Google Maps?

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