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.

Transcript

1. como você nunca viu. Google Maps
3. Front-end Engineer Design Gráfico @Unibratec Web Apps @Unibratec @thulioph
4. Front-end Engineer Design Gráfico @Unibratec Web Apps @Unibratec @thulioph_
6. Era uma vez...
7. http://tableless.com.br/api-google-maps-v3
8. Só que aí..
10. quem procura acha!
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
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_